@atom-learning/components 3.11.0 → 3.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
## [3.11.1](https://github.com/Atom-Learning/components/compare/v3.11.0...v3.11.1) (2024-01-10)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* access to theme in docs, apply fonts ([f81baff](https://github.com/Atom-Learning/components/commit/f81baffe172bc3f6f081164302a171c5adcb1d32))
|
|
8
|
-
* ensure tokens update with brand change ([bb413c8](https://github.com/Atom-Learning/components/commit/bb413c8f3bfdd8912b496d42166fc138f09a544a))
|
|
9
|
-
* update components to use new primary keys ([c5c75fb](https://github.com/Atom-Learning/components/commit/c5c75fbfe9d290cc74ab15a546e1132f44dbdf3d))
|
|
10
|
-
* update docs ([8493d35](https://github.com/Atom-Learning/components/commit/8493d3533dc036f980519aac026d3d3f7cf5d1b5))
|
|
11
|
-
* updated some blues to either info or primary ([58f41fd](https://github.com/Atom-Learning/components/commit/58f41fdcbc2bf47e0577495b7fc202b3becbcd97))
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
### Features
|
|
15
|
-
|
|
16
|
-
* snapshots ([8baa71a](https://github.com/Atom-Learning/components/commit/8baa71a8bf8d60b2292a9abc01d3847c896739df))
|
|
17
|
-
* update nav to use NavigationMenuVertical, and include theme toggle ([79a2b40](https://github.com/Atom-Learning/components/commit/79a2b400a8c0d8cbd5636ccb638cf60f88ac6d5e))
|
|
6
|
+
* button apperance overlap ([89975f1](https://github.com/Atom-Learning/components/commit/89975f10a65a8b4ac235222a450f77a69772b871))
|
|
18
7
|
|
|
19
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
20
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{opacify as s}from"color2k";import*as a from"react";import{StyledIcon as d}from"../icon/Icon.js";import{Loader as
|
|
1
|
+
import{opacify as s}from"color2k";import*as a from"react";import{StyledIcon as d}from"../icon/Icon.js";import{Loader as y}from"../loader/Loader.js";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as l}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as h}from"../../utilities/uri/index.js";const p=(e,i,r,t)=>({theme:e,appearance:"outline",css:{border:"1px solid",borderColor:"currentColor",color:i,"&[disabled]":l,"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:t}}}),n=(e,i,r,t,o="white")=>({theme:e,appearance:"solid",css:{bg:i,color:o,"&[disabled]":l,"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:o},"&:not([disabled]):active":{bg:t}}}),$=c("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","&[disabled]":l,variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${d}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${d}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",gap:"$3",[`& ${d}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"},false:{width:"max-content"}}},compoundVariants:[n("primary","$primary800","$primary900","$primary1000"),n("secondary","$primary1000","$primary1100","$primary1200"),n("success","$success","$successMid","$successDark"),n("warning","$warning","$warningMid","$warningDark","$tonal500"),n("danger","$danger","$dangerMid","$dangerDark"),n("neutral","white",s("white",-.1),s("white",-.25),"$primary800"),p("primary","$primary800","$primary900","$primary1000"),p("secondary","$primary1000","$primary1100","$primary1200"),p("neutral","white",s("white",-.2),s("white",-.35))],defaultVariants:{appearance:"solid",size:"md",theme:"primary"}}),f=c("span",{alignItems:"center",display:"flex",justifyContent:"center",visibility:"hidden",variants:{size:{sm:{gap:"$2"},md:{gap:"$3"},lg:{gap:"$3"}}},defaultVariants:{size:"md"}}),b=({size:e,children:i})=>a.createElement(a.Fragment,null,a.createElement(y,{css:{position:"absolute"}}),a.createElement(f,{size:e},i)),g=a.forwardRef(({children:e,as:i,href:r,isLoading:t=!1,onClick:o,...m},u)=>a.createElement($,{as:i||(r?"a":void 0),href:r,isLoading:t,onClick:t?void 0:o,type:r?void 0:"button",...m,...h(r),ref:u},t?a.createElement(b,{size:m.size},e):e));g.displayName="Button";export{g as Button,$ 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 { opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: '
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': { color: active }\n }\n})\n\nconst getButtonSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: text,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': { 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 '&[disabled]': disabledStyle,\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 true: { width: '100%' },\n false: { width: 'max-content' }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getButtonSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getButtonSolidVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n getButtonSolidVariant('success', '$success', '$successMid', '$successDark'),\n getButtonSolidVariant('warning', '$warning', '$warningMid', '$warningDark', '$tonal500'),\n getButtonSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getButtonSolidVariant('neutral', 'white', opacify('white', -0.1), opacify('white', -0.25), '$primary800'),\n \n getButtonOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getButtonOutlineVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n getButtonOutlineVariant('neutral', 'white', opacify('white', -0.2), opacify('white', -0.35))\n ],\n\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\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 defaultVariants: {\n size: 'md'\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 ({ children, as, href, isLoading = false, onClick, ...rest }, ref) => (\n <StyledButton\n as={as || (href ? 'a' : undefined)}\n href={href}\n isLoading={isLoading}\n onClick={!isLoading ? onClick : undefined}\n type={!href ? 'button' : undefined}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n) as React.FC<ButtonProps>\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","theme","base","interact","active","disabledStyle","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","opacify","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","rest","ref","getExternalAnchorProps"],"mappings":"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"}
|