@atom-learning/components 5.4.0 → 5.4.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
|
+
## [5.4.1](https://github.com/Atom-Learning/components/compare/v5.4.0...v5.4.1) (2025-07-17)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* added build lib step before building docs ([c4f7856](https://github.com/Atom-Learning/components/commit/c4f7856c1ddcdf561296d00cc584c76fa328c13f))
|
|
8
|
-
* fixing order of tasks in release ([f6a315f](https://github.com/Atom-Learning/components/commit/f6a315f9a6dc033342ed4d9c5ba3f9fc6c9b4b10))
|
|
9
|
-
* made types explicit in the badge variant list constants ([b48fc64](https://github.com/Atom-Learning/components/commit/b48fc6477c190d2d4da3efd201ccb06803b938e3))
|
|
10
|
-
* make themes and emphasis types explicit ([a1d9256](https://github.com/Atom-Learning/components/commit/a1d92563c1e4f11550b622ad23fdbecdda36bd45))
|
|
11
|
-
* run build steps from root directory ([9c9f000](https://github.com/Atom-Learning/components/commit/9c9f000ff57e1ca38f9e8a7605060cf5ad5780f1))
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
### Features
|
|
15
|
-
|
|
16
|
-
* accordion arrow position ([d6daf56](https://github.com/Atom-Learning/components/commit/d6daf564fd73d70392be514a8e15b0d03de01f79))
|
|
17
|
-
* added build step to release, and build docs to ci test ([a2e52cd](https://github.com/Atom-Learning/components/commit/a2e52cdffc865cd118f9e48d0458e265925fa356))
|
|
6
|
+
* removed invariant from badge ([eaccfa1](https://github.com/Atom-Learning/components/commit/eaccfa1771de7f1742b6eab8fd890ea9921c8d03))
|
|
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
|
|
1
|
+
import*as e from"react";import{Flex as x}from"../flex/Flex.js";import{Icon as $}from"../icon/Icon.js";import{styled as k}from"../../stitches.js";import{useCallbackRefState as v}from"../../utilities/hooks/useCallbackRef.js";import{BadgeContext as y,BadgeProvider as B}from"./Badge.context.js";import{BadgeIcon as a}from"./BadgeIcon.js";import{BadgeText as n}from"./BadgeText.js";import{colorSchemes as C,badgeSemanticNames as w}from"./stitches.badge.colorscheme.config.js";import{OptionalTooltipWrapper as O}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const S=k(x,{justifyContent:"center",alignItems:"center",borderRadius:"$0",minWidth:0,border:"1px solid #FFFFFF",fontFamily:"$body","& > *:not(:last-child)":{mr:"$1"},variants:{emphasis:{white:{color:"$textOnWhite",background:"white"},subtle:{color:"$textSubtle",background:"$backgroundSubtle"},bold:{color:"$textBold",background:"$backgroundBold"}},size:{xs:{px:"$1"},sm:{px:"$1",py:"$0"},md:{px:"$2",py:"$1"}},isClickable:{true:{cursor:"pointer"}},highlighted:{true:{}}},compoundVariants:[{isClickable:!0,emphasis:"white",css:{"&:hover":{color:"$textOnWhite",background:"color-mix(in srgb, $textOnWhite, transparent 92%)"}}},{isClickable:!0,emphasis:"subtle",css:{"&:hover":{color:"$textSubtleHover",background:"$backgroundSubtleHover"}}},{isClickable:!0,emphasis:"bold",css:{"&:hover":{color:"$textBold",background:"$backgroundBoldHover"}}},{emphasis:"white",highlighted:!0,css:{color:"$textOnWhite",background:"color-mix(in srgb, $textOnWhite, transparent 92%)"}},{emphasis:"subtle",highlighted:!0,css:{color:"$textSubtleHover",background:"$backgroundSubtleHover"}},{emphasis:"bold",highlighted:!0,css:{color:"$textBold",background:"$backgroundBoldHover"}}]}),F=e.forwardRef(({theme:r="info",emphasis:s="subtle",children:i,...o},d)=>{const{size:m,overflow:b,isOverflowing:p}=e.useContext(y),[l,u]=v();e.useImperativeHandle(d,()=>l);const h=l==null?void 0:l.textContent,g=w.includes(r),f=Object.keys(o).includes("onClick")||Object.keys(o).includes("href");return e.createElement(O,{hasTooltip:b==="ellipsis"&&p,label:h},e.createElement(S,{role:"status",emphasis:s,size:m,...o,className:C[r],ref:u,isClickable:f&&!g},e.Children.map(i,t=>typeof t=="string"||typeof t=="number"?e.createElement(n,null,t):e.isValidElement(t)&&t.type===$?e.createElement(a,{...t.props}):t)))}),c=e.forwardRef(({size:r="sm",overflow:s="wrap",...i},o)=>e.createElement(B,{size:r,overflow:s},e.createElement(F,{...i,ref:o}))),E=Object.assign(c,{Icon:a,Text:n});c.displayName="Badge";export{E as Badge};
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\nimport {\n badgeSemanticNames,\n colorSchemes as badgeColorSchemes\n} from './stitches.badge.colorscheme.config'\n\nconst StyledBadge = styled(Flex, {\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '$0',\n minWidth: 0,\n border: '1px solid #FFFFFF',\n fontFamily: '$body',\n '& > *:not(:last-child)': {\n mr: '$1'\n },\n variants: {\n emphasis: {\n white: {\n color: '$textOnWhite',\n background: 'white'\n },\n subtle: {\n color: '$textSubtle',\n background: '$backgroundSubtle'\n },\n bold: {\n color: '$textBold',\n background: '$backgroundBold'\n }\n },\n size: {\n xs: {\n px: '$1'\n },\n sm: {\n px: '$1',\n py: '$0'\n },\n md: {\n px: '$2',\n py: '$1'\n }\n },\n\n isClickable: {\n true: {\n cursor: 'pointer'\n }\n },\n highlighted: {\n true: {}\n }\n },\n compoundVariants: [\n {\n isClickable: true,\n emphasis: 'white',\n css: {\n '&:hover': {\n color: '$textOnWhite',\n background: 'color-mix(in srgb, $textOnWhite, transparent 92%)'\n }\n }\n },\n {\n isClickable: true,\n emphasis: 'subtle',\n css: {\n '&:hover': {\n color: '$textSubtleHover',\n background: '$backgroundSubtleHover'\n }\n }\n },\n {\n isClickable: true,\n emphasis: 'bold',\n css: {\n '&:hover': {\n color: '$textBold',\n background: '$backgroundBoldHover'\n }\n }\n },\n {\n emphasis: 'white',\n highlighted: true,\n css: {\n color: '$textOnWhite',\n background: 'color-mix(in srgb, $textOnWhite, transparent 92%)'\n }\n },\n {\n emphasis: 'subtle',\n highlighted: true,\n css: {\n color: '$textSubtleHover',\n background: '$backgroundSubtleHover'\n }\n },\n {\n emphasis: 'bold',\n highlighted: true,\n css: {\n color: '$textBold',\n background: '$backgroundBoldHover'\n }\n }\n ]\n})\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n theme?: keyof typeof badgeColorSchemes\n overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner: React.ForwardRefExoticComponent<TBadgeInnerProps> =\n React.forwardRef(\n ({ theme = 'info', emphasis = 'subtle', children, ...rest }, ref) => {\n const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n const label = badgeElRef?.textContent\n\n const isInfoOnly = badgeSemanticNames.includes(theme)\n\n const isClickable =\n Object.keys(rest).includes('onClick') ||\n Object.keys(rest).includes('href')\n\n
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\n\nimport { BadgeContext, BadgeProvider } from './Badge.context'\nimport { BadgeIcon } from './BadgeIcon'\nimport { BadgeText } from './BadgeText'\nimport {\n badgeSemanticNames,\n colorSchemes as badgeColorSchemes\n} from './stitches.badge.colorscheme.config'\n\nconst StyledBadge = styled(Flex, {\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '$0',\n minWidth: 0,\n border: '1px solid #FFFFFF',\n fontFamily: '$body',\n '& > *:not(:last-child)': {\n mr: '$1'\n },\n variants: {\n emphasis: {\n white: {\n color: '$textOnWhite',\n background: 'white'\n },\n subtle: {\n color: '$textSubtle',\n background: '$backgroundSubtle'\n },\n bold: {\n color: '$textBold',\n background: '$backgroundBold'\n }\n },\n size: {\n xs: {\n px: '$1'\n },\n sm: {\n px: '$1',\n py: '$0'\n },\n md: {\n px: '$2',\n py: '$1'\n }\n },\n\n isClickable: {\n true: {\n cursor: 'pointer'\n }\n },\n highlighted: {\n true: {}\n }\n },\n compoundVariants: [\n {\n isClickable: true,\n emphasis: 'white',\n css: {\n '&:hover': {\n color: '$textOnWhite',\n background: 'color-mix(in srgb, $textOnWhite, transparent 92%)'\n }\n }\n },\n {\n isClickable: true,\n emphasis: 'subtle',\n css: {\n '&:hover': {\n color: '$textSubtleHover',\n background: '$backgroundSubtleHover'\n }\n }\n },\n {\n isClickable: true,\n emphasis: 'bold',\n css: {\n '&:hover': {\n color: '$textBold',\n background: '$backgroundBoldHover'\n }\n }\n },\n {\n emphasis: 'white',\n highlighted: true,\n css: {\n color: '$textOnWhite',\n background: 'color-mix(in srgb, $textOnWhite, transparent 92%)'\n }\n },\n {\n emphasis: 'subtle',\n highlighted: true,\n css: {\n color: '$textSubtleHover',\n background: '$backgroundSubtleHover'\n }\n },\n {\n emphasis: 'bold',\n highlighted: true,\n css: {\n color: '$textBold',\n background: '$backgroundBoldHover'\n }\n }\n ]\n})\n\nexport type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {\n theme?: keyof typeof badgeColorSchemes\n overflow?: React.ComponentProps<typeof BadgeText>['overflow']\n}\n\ntype TBadgeInnerProps = Omit<TBadgeProps, 'size' | 'overflow'>\n\nconst BadgeInner: React.ForwardRefExoticComponent<TBadgeInnerProps> =\n React.forwardRef(\n ({ theme = 'info', emphasis = 'subtle', children, ...rest }, ref) => {\n const { size, overflow, isOverflowing } = React.useContext(BadgeContext)\n const [badgeElRef, setBadgeElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement)\n\n const label = badgeElRef?.textContent\n\n const isInfoOnly = badgeSemanticNames.includes(theme)\n\n const isClickable =\n Object.keys(rest).includes('onClick') ||\n Object.keys(rest).includes('href')\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={overflow === 'ellipsis' && isOverflowing}\n label={label}\n >\n <StyledBadge\n role=\"status\"\n emphasis={emphasis}\n size={size}\n {...rest}\n className={badgeColorSchemes[theme]}\n ref={setBadgeElRef}\n isClickable={isClickable && !isInfoOnly}\n >\n {React.Children.map(children, (child) => {\n if (typeof child === 'string' || typeof child === 'number') {\n return <BadgeText>{child}</BadgeText>\n }\n if (React.isValidElement(child) && child.type === Icon) {\n return <BadgeIcon {...child.props} />\n }\n return child\n })}\n </StyledBadge>\n </OptionalTooltipWrapper>\n )\n }\n )\n\nconst BadgeComponent: React.ForwardRefExoticComponent<TBadgeProps> =\n React.forwardRef(({ size = 'sm', overflow = 'wrap', ...rest }, ref) => {\n return (\n <BadgeProvider size={size} overflow={overflow}>\n <BadgeInner {...rest} ref={ref} />\n </BadgeProvider>\n )\n })\n\nexport const Badge = Object.assign(BadgeComponent, {\n Icon: BadgeIcon,\n Text: BadgeText\n})\n\nBadgeComponent.displayName = 'Badge'\n"],"names":["StyledBadge","styled","Flex","BadgeInner","React","theme","emphasis","children","rest","ref","size","overflow","isOverflowing","BadgeContext","badgeElRef","setBadgeElRef","useCallbackRefState","label","isInfoOnly","badgeSemanticNames","isClickable","OptionalTooltipWrapper","badgeColorSchemes","child","BadgeText","Icon","BadgeIcon","BadgeComponent","BadgeProvider","Badge"],"mappings":"okBAiBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,SAAU,EACV,OAAQ,oBACR,WAAY,QACZ,yBAA0B,CACxB,GAAI,IACN,EACA,SAAU,CACR,SAAU,CACR,MAAO,CACL,MAAO,eACP,WAAY,OACd,EACA,OAAQ,CACN,MAAO,cACP,WAAY,mBACd,EACA,KAAM,CACJ,MAAO,YACP,WAAY,iBACd,CACF,EACA,KAAM,CACJ,GAAI,CACF,GAAI,IACN,EACA,GAAI,CACF,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,GAAI,KACJ,GAAI,IACN,CACF,EAEA,YAAa,CACX,KAAM,CACJ,OAAQ,SACV,CACF,EACA,YAAa,CACX,KAAM,CACR,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,SAAU,QACV,IAAK,CACH,UAAW,CACT,MAAO,eACP,WAAY,mDACd,CACF,CACF,EACA,CACE,YAAa,GACb,SAAU,SACV,IAAK,CACH,UAAW,CACT,MAAO,mBACP,WAAY,wBACd,CACF,CACF,EACA,CACE,YAAa,GACb,SAAU,OACV,IAAK,CACH,UAAW,CACT,MAAO,YACP,WAAY,sBACd,CACF,CACF,EACA,CACE,SAAU,QACV,YAAa,GACb,IAAK,CACH,MAAO,eACP,WAAY,mDACd,CACF,EACA,CACE,SAAU,SACV,YAAa,GACb,IAAK,CACH,MAAO,mBACP,WAAY,wBACd,CACF,EACA,CACE,SAAU,OACV,YAAa,GACb,IAAK,CACH,MAAO,YACP,WAAY,sBACd,CACF,CACF,CACF,CAAC,EASKC,EACJC,EAAM,WACJ,CAAC,CAAE,MAAAC,EAAQ,OAAQ,SAAAC,EAAW,SAAU,SAAAC,KAAaC,CAAK,EAAGC,IAAQ,CACnE,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,cAAAC,CAAc,EAAIR,EAAM,WAAWS,CAAY,EACjE,CAACC,EAAYC,CAAa,EAAIC,EAAoB,EACxDZ,EAAM,oBAAoBK,EAAK,IAAMK,CAA4B,EAEjE,MAAMG,EAAQH,GAAA,YAAAA,EAAY,YAEpBI,EAAaC,EAAmB,SAASd,CAAK,EAE9Ce,EACJ,OAAO,KAAKZ,CAAI,EAAE,SAAS,SAAS,GACpC,OAAO,KAAKA,CAAI,EAAE,SAAS,MAAM,EAEnC,OACEJ,EAAA,cAACiB,EAAA,CACC,WAAYV,IAAa,YAAcC,EACvC,MAAOK,CAEPb,EAAAA,EAAA,cAACJ,EAAA,CACC,KAAK,SACL,SAAUM,EACV,KAAMI,EACL,GAAGF,EACJ,UAAWc,EAAkBjB,GAC7B,IAAKU,EACL,YAAaK,GAAe,CAACF,GAE5Bd,EAAM,SAAS,IAAIG,EAAWgB,GACzB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACzCnB,EAAA,cAACoB,EAAA,KAAWD,CAAM,EAEvBnB,EAAM,eAAemB,CAAK,GAAKA,EAAM,OAASE,EACzCrB,EAAA,cAACsB,EAAA,CAAW,GAAGH,EAAM,KAAA,CAAO,EAE9BA,CACR,CACH,CACF,CAEJ,CACF,EAEII,EACJvB,EAAM,WAAW,CAAC,CAAE,KAAAM,EAAO,KAAM,SAAAC,EAAW,UAAWH,CAAK,EAAGC,IAE3DL,EAAA,cAACwB,EAAA,CAAc,KAAMlB,EAAM,SAAUC,CAAAA,EACnCP,EAAA,cAACD,EAAA,CAAY,GAAGK,EAAM,IAAKC,CAAK,CAAA,CAClC,CAEH,EAEUoB,EAAQ,OAAO,OAAOF,EAAgB,CACjD,KAAMD,EACN,KAAMF,CACR,CAAC,EAEDG,EAAe,YAAc"}
|