@atom-learning/components 3.1.0 → 3.1.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,30 +1,9 @@
1
- # [3.1.0](https://github.com/Atom-Learning/components/compare/v3.0.2...v3.1.0) (2023-10-23)
1
+ ## [3.1.1](https://github.com/Atom-Learning/components/compare/v3.1.0...v3.1.1) (2023-10-24)
2
2
 
3
3
 
4
4
  ### Bug Fixes
5
5
 
6
- * ensure action buttons wrap ([94f804a](https://github.com/Atom-Learning/components/commit/94f804a260f8bacbcef0742caa373a29dbb05c9a))
7
- * trigger release 3.0.3 ([fc3ed11](https://github.com/Atom-Learning/components/commit/fc3ed11dd4c70507844aaaa361ba8cf3cf41c43d))
8
-
9
-
10
- ### Features
11
-
12
- * add alert dialog doc description for recommended approach ([5cf334b](https://github.com/Atom-Learning/components/commit/5cf334b9a07cc58a55714e962c6da552f30d7f3e))
13
- * add close button to show alert dialog ([ab0d2df](https://github.com/Atom-Learning/components/commit/ab0d2dfb0a9d20ccda7f09c9e57918016f8d7c3a))
14
- * add onClick example to alert dialog docs ([d2411b4](https://github.com/Atom-Learning/components/commit/d2411b4a74ad25687c1fed41a855d005cfe0bb12))
15
- * add showalert button theme and appearance options ([d08a11c](https://github.com/Atom-Learning/components/commit/d08a11c65945febbf622ef8598c979e44d944eae))
16
- * add size prop to alert dialog context ([fb88ef3](https://github.com/Atom-Learning/components/commit/fb88ef3b933f02eff11b30325404b1a100bd2dcd))
17
- * add themed icon to showalert dialog ([174bd28](https://github.com/Atom-Learning/components/commit/174bd28b4c2d889da834049e78c196ec05195c9c))
18
- * allow rendering functional components with codeblocks ([894bf44](https://github.com/Atom-Learning/components/commit/894bf442811a61d0926a76af1c5a2ccafc7552c9))
19
- * make showAlert onAction optional ([0471656](https://github.com/Atom-Learning/components/commit/0471656f25fd1297f61d6b5756bb5dd0d40be6c7))
20
- * remove alert close button option ([c98b5ec](https://github.com/Atom-Learning/components/commit/c98b5ecec2789c3c06ff072c398969288ca052a0))
21
- * remove awaits ([283d282](https://github.com/Atom-Learning/components/commit/283d28254e692cf6fac55210705d3f8c335990f9))
22
- * remove redundant colour ([211fe0a](https://github.com/Atom-Learning/components/commit/211fe0a8979386718ac0aa8e0cf0e215e79c179d))
23
- * replace props with action elements ([54862d5](https://github.com/Atom-Learning/components/commit/54862d54817c404e5b69e33e98b19996ad60bf0b))
24
- * replace stack with flex ([302cbef](https://github.com/Atom-Learning/components/commit/302cbef6000a8e9f8ed4523e2deb2bb33ca5cc9c))
25
- * scroll overflow showAlert content ([4ca33b8](https://github.com/Atom-Learning/components/commit/4ca33b80bff019571abe49dbd4949aed9a0fb5dd))
26
- * update alertdialog documentation and example ([7efbb46](https://github.com/Atom-Learning/components/commit/7efbb46e3fe14caf6a783ea29e1c2657c6cfd13d))
27
- * use gap instead of margin ([02e8754](https://github.com/Atom-Learning/components/commit/02e87549b7b95a2d16b3f8dab9b207bb3bd83bc5))
6
+ * set overflowY to auto ([46d0c63](https://github.com/Atom-Learning/components/commit/46d0c6360de90771569d3cefa0f4e0f39726751c))
28
7
 
29
8
  # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
30
9
 
@@ -1,2 +1,2 @@
1
- import*as e from"react";import{Button as i}from"../../button/Button.js";import{Heading as x}from"../../heading/Heading.js";import{Flex as c}from"../../flex/Flex.js";import{Text as g}from"../../text/Text.js";import{AlertDialog as t}from"../AlertDialog.js";import{AlertDialogIcon as A}from"./AlertDialogIcon.js";const C=({title:m,size:a,theme:o,description:l,onAction:n,cancelActionText:r,confirmActionText:s,onClose:p,confirmElement:f,cancelElement:E,...d})=>e.createElement(t,{defaultOpen:!0},e.createElement(t.Content,{size:a,onEscapeKeyDown:u=>u.preventDefault(),onCloseAutoFocus:p,css:{display:"flex",flexDirection:"column",maxHeight:"90vh",gap:"$5"},...d},e.createElement(c,{css:{alignItems:"center",gap:"$2"}},o&&e.createElement(A,{theme:o}),e.createElement(x,{as:t.Title,size:"sm",css:{mr:"$4"}},m)),l&&e.createElement(g,{as:t.Description,css:{display:"flex",overflowY:"scroll"}},l),e.createElement(c,{gap:"2",justify:"end",wrap:"wrap"},e.createElement(t.Cancel,{asChild:!0},E||r&&e.createElement(i,{size:"sm",appearance:"outline",onClick:()=>n==null?void 0:n(!1)},r)),e.createElement(t.Action,{asChild:!0},f||e.createElement(i,{size:"sm",onClick:()=>n==null?void 0:n(!0)},s)))));export{C as Alert};
1
+ import*as e from"react";import{Button as r}from"../../button/Button.js";import{Flex as a}from"../../flex/Flex.js";import{Heading as x}from"../../heading/Heading.js";import{Text as g}from"../../text/Text.js";import{AlertDialog as t}from"../AlertDialog.js";import{AlertDialogIcon as A}from"./AlertDialogIcon.js";const C=({title:c,size:m,theme:o,description:l,onAction:n,cancelActionText:i,confirmActionText:s,onClose:p,confirmElement:f,cancelElement:E,...u})=>e.createElement(t,{defaultOpen:!0},e.createElement(t.Content,{size:m,onEscapeKeyDown:d=>d.preventDefault(),onCloseAutoFocus:p,css:{display:"flex",flexDirection:"column",maxHeight:"90vh",gap:"$5"},...u},e.createElement(a,{css:{alignItems:"center",gap:"$2"}},o&&e.createElement(A,{theme:o}),e.createElement(x,{as:t.Title,size:"sm",css:{mr:"$4"}},c)),l&&e.createElement(g,{as:t.Description,css:{display:"flex",overflowY:"auto"}},l),e.createElement(a,{gap:"2",justify:"end",wrap:"wrap"},e.createElement(t.Cancel,{asChild:!0},E||i&&e.createElement(r,{size:"sm",appearance:"outline",onClick:()=>n==null?void 0:n(!1)},i)),e.createElement(t.Action,{asChild:!0},f||e.createElement(r,{size:"sm",onClick:()=>n==null?void 0:n(!0)},s)))));export{C as Alert};
2
2
  //# sourceMappingURL=AlertDialog.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Button } from '../../button'\nimport { Heading } from '../../heading'\nimport { Flex } from '../../flex'\nimport { Text } from '../../text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n css?: CSS\n onClose: () => void\n} & alert\n\nexport const Alert: React.FC<AlertDialogContentProps> = ({\n title,\n size,\n theme,\n description,\n onAction,\n cancelActionText,\n confirmActionText,\n onClose,\n confirmElement,\n cancelElement,\n ...remainingProps\n}) => (\n <AlertDialog defaultOpen>\n <AlertDialog.Content\n size={size}\n onEscapeKeyDown={(e) => e.preventDefault()}\n onCloseAutoFocus={onClose}\n css={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '90vh',\n gap: '$5'\n }}\n {...remainingProps}\n >\n <Flex css={{ alignItems: 'center', gap: '$2' }}>\n {theme && <AlertDialogIcon theme={theme} />}\n <Heading as={AlertDialog.Title} size=\"sm\" css={{ mr: '$4' }}>\n {title}\n </Heading>\n </Flex>\n {description && (\n <Text\n as={AlertDialog.Description}\n css={{ display: 'flex', overflowY: 'scroll' }}\n >\n {description}\n </Text>\n )}\n <Flex gap=\"2\" justify=\"end\" wrap=\"wrap\">\n <AlertDialog.Cancel asChild>\n {cancelElement ||\n (cancelActionText && (\n <Button\n size=\"sm\"\n appearance=\"outline\"\n onClick={() => onAction?.(false)}\n >\n {cancelActionText}\n </Button>\n ))}\n </AlertDialog.Cancel>\n <AlertDialog.Action asChild>\n {confirmElement || (\n <Button size=\"sm\" onClick={() => onAction?.(true)}>\n {confirmActionText}\n </Button>\n )}\n </AlertDialog.Action>\n </Flex>\n </AlertDialog.Content>\n </AlertDialog>\n)\n"],"names":["Alert","title","size","theme","description","onAction","cancelActionText","confirmActionText","onClose","confirmElement","cancelElement","remainingProps","React","AlertDialog","e","Flex","AlertDialogIcon","Heading","Text","Button"],"mappings":"4TAiBaA,EAA2C,CAAC,CACvD,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAY,YAAW,IACtBD,EAAA,cAACC,EAAY,QAAZ,CACC,KAAMX,EACN,gBAAkBY,GAAMA,EAAE,eAC1B,EAAA,iBAAkBN,EAClB,IAAK,CACH,QAAS,OACT,cAAe,SACf,UAAW,OACX,IAAK,IACP,EACC,GAAGG,CAEJC,EAAAA,EAAA,cAACG,EAAA,CAAK,IAAK,CAAE,WAAY,SAAU,IAAK,IAAK,CAC1CZ,EAAAA,GAASS,EAAA,cAACI,EAAA,CAAgB,MAAOb,EAAO,EACzCS,EAAA,cAACK,EAAA,CAAQ,GAAIJ,EAAY,MAAO,KAAK,KAAK,IAAK,CAAE,GAAI,IAAK,GACvDZ,CACH,CACF,EACCG,GACCQ,EAAA,cAACM,EAAA,CACC,GAAIL,EAAY,YAChB,IAAK,CAAE,QAAS,OAAQ,UAAW,QAAS,CAAA,EAE3CT,CACH,EAEFQ,EAAA,cAACG,EAAA,CAAK,IAAI,IAAI,QAAQ,MAAM,KAAK,MAC/BH,EAAAA,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,EAAA,EACxBH,GACEJ,GACCM,EAAA,cAACO,EAAA,CACC,KAAK,KACL,WAAW,UACX,QAAS,IAAMd,GAAA,KAAAA,OAAAA,EAAW,EAEzBC,CAAAA,EAAAA,CACH,CAEN,EACAM,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,IACxBJ,GACCG,EAAA,cAACO,EAAA,CAAO,KAAK,KAAK,QAAS,IAAMd,GAAA,KAAAA,OAAAA,EAAW,KACzCE,CACH,CAEJ,CACF,CACF,CACF"}
1
+ {"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Button } from '../../button'\nimport { Flex } from '../../flex'\nimport { Heading } from '../../heading'\nimport { Text } from '../../text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n css?: CSS\n onClose: () => void\n} & alert\n\nexport const Alert: React.FC<AlertDialogContentProps> = ({\n title,\n size,\n theme,\n description,\n onAction,\n cancelActionText,\n confirmActionText,\n onClose,\n confirmElement,\n cancelElement,\n ...remainingProps\n}) => (\n <AlertDialog defaultOpen>\n <AlertDialog.Content\n size={size}\n onEscapeKeyDown={(e) => e.preventDefault()}\n onCloseAutoFocus={onClose}\n css={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '90vh',\n gap: '$5'\n }}\n {...remainingProps}\n >\n <Flex css={{ alignItems: 'center', gap: '$2' }}>\n {theme && <AlertDialogIcon theme={theme} />}\n <Heading as={AlertDialog.Title} size=\"sm\" css={{ mr: '$4' }}>\n {title}\n </Heading>\n </Flex>\n {description && (\n <Text\n as={AlertDialog.Description}\n css={{ display: 'flex', overflowY: 'auto' }}\n >\n {description}\n </Text>\n )}\n <Flex gap=\"2\" justify=\"end\" wrap=\"wrap\">\n <AlertDialog.Cancel asChild>\n {cancelElement ||\n (cancelActionText && (\n <Button\n size=\"sm\"\n appearance=\"outline\"\n onClick={() => onAction?.(false)}\n >\n {cancelActionText}\n </Button>\n ))}\n </AlertDialog.Cancel>\n <AlertDialog.Action asChild>\n {confirmElement || (\n <Button size=\"sm\" onClick={() => onAction?.(true)}>\n {confirmActionText}\n </Button>\n )}\n </AlertDialog.Action>\n </Flex>\n </AlertDialog.Content>\n </AlertDialog>\n)\n"],"names":["Alert","title","size","theme","description","onAction","cancelActionText","confirmActionText","onClose","confirmElement","cancelElement","remainingProps","React","AlertDialog","e","Flex","AlertDialogIcon","Heading","Text","Button"],"mappings":"4TAiBaA,EAA2C,CAAC,CACvD,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAY,YAAW,IACtBD,EAAA,cAACC,EAAY,QAAZ,CACC,KAAMX,EACN,gBAAkBY,GAAMA,EAAE,eAC1B,EAAA,iBAAkBN,EAClB,IAAK,CACH,QAAS,OACT,cAAe,SACf,UAAW,OACX,IAAK,IACP,EACC,GAAGG,CAEJC,EAAAA,EAAA,cAACG,EAAA,CAAK,IAAK,CAAE,WAAY,SAAU,IAAK,IAAK,CAC1CZ,EAAAA,GAASS,EAAA,cAACI,EAAA,CAAgB,MAAOb,EAAO,EACzCS,EAAA,cAACK,EAAA,CAAQ,GAAIJ,EAAY,MAAO,KAAK,KAAK,IAAK,CAAE,GAAI,IAAK,GACvDZ,CACH,CACF,EACCG,GACCQ,EAAA,cAACM,EAAA,CACC,GAAIL,EAAY,YAChB,IAAK,CAAE,QAAS,OAAQ,UAAW,MAAO,CAAA,EAEzCT,CACH,EAEFQ,EAAA,cAACG,EAAA,CAAK,IAAI,IAAI,QAAQ,MAAM,KAAK,MAC/BH,EAAAA,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,EAAA,EACxBH,GACEJ,GACCM,EAAA,cAACO,EAAA,CACC,KAAK,KACL,WAAW,UACX,QAAS,IAAMd,GAAA,KAAAA,OAAAA,EAAW,EAEzBC,CAAAA,EAAAA,CACH,CAEN,EACAM,EAAA,cAACC,EAAY,OAAZ,CAAmB,QAAO,IACxBJ,GACCG,EAAA,cAACO,EAAA,CAAO,KAAK,KAAK,QAAS,IAAMd,GAAA,KAAAA,OAAAA,EAAW,KACzCE,CACH,CAEJ,CACF,CACF,CACF"}
@@ -1,2 +1,2 @@
1
- import*as o from"react";import{Info as e,Danger as n,OkCircle as t}from"@atom-learning/icons";import{styled as s}from"../../../stitches.js";import{Icon as i}from"../../icon/Icon.js";const a=s(i,{flexShrink:0,alignSelf:"flex-start",variants:{theme:{info:{color:"$blue800"},warning:{color:"$warningMid"},danger:{color:"$danger",transform:"rotate(180deg)"},success:{color:"$success"}}}}),c={info:e,warning:n,danger:e,success:t},l=({theme:r})=>o.createElement(a,{theme:r,is:c[r]});export{l as AlertDialogIcon};
1
+ import{Info as e,Danger as o,OkCircle as n}from"@atom-learning/icons";import*as t from"react";import{styled as s}from"../../../stitches.js";import{Icon as i}from"../../icon/Icon.js";const a=s(i,{flexShrink:0,alignSelf:"flex-start",variants:{theme:{info:{color:"$blue800"},warning:{color:"$warningMid"},danger:{color:"$danger",transform:"rotate(180deg)"},success:{color:"$success"}}}}),c={info:e,warning:o,danger:e,success:n},l=({theme:r})=>t.createElement(a,{theme:r,is:c[r]});export{l as AlertDialogIcon};
2
2
  //# sourceMappingURL=AlertDialogIcon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AlertDialogIcon.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialogIcon.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Info, Danger, OkCircle } from '@atom-learning/icons'\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../../icon'\n\nexport type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success'\n\nconst StyledIcon = styled(Icon, {\n flexShrink: 0,\n alignSelf: 'flex-start',\n variants: {\n theme: {\n info: { color: '$blue800' },\n warning: { color: '$warningMid' },\n danger: { color: '$danger', transform: 'rotate(180deg)' },\n success: { color: '$success' }\n }\n }\n})\n\nconst iconMap: Record<\n AlertDialogTheme,\n React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n info: Info,\n warning: Danger,\n danger: Info,\n success: OkCircle\n}\n\nexport const AlertDialogIcon = ({ theme }: { theme: AlertDialogTheme }) => (\n <StyledIcon theme={theme} is={iconMap[theme]} />\n)\n"],"names":["StyledIcon","styled","Icon","iconMap","Info","Danger","OkCircle","AlertDialogIcon","theme","React"],"mappings":"sLAQA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,WAAY,EACZ,UAAW,aACX,SAAU,CACR,MAAO,CACL,KAAM,CAAE,MAAO,UAAW,EAC1B,QAAS,CAAE,MAAO,aAAc,EAChC,OAAQ,CAAE,MAAO,UAAW,UAAW,gBAAiB,EACxD,QAAS,CAAE,MAAO,UAAW,CAC/B,CACF,CACF,CAAC,EAEKC,EAGF,CACF,KAAMC,EACN,QAASC,EACT,OAAQD,EACR,QAASE,CACX,EAEaC,EAAkB,CAAC,CAAE,MAAAC,CAAM,IACtCC,EAAA,cAACT,EAAA,CAAW,MAAOQ,EAAO,GAAIL,EAAQK,EAAQ,CAAA"}
1
+ {"version":3,"file":"AlertDialogIcon.js","sources":["../../../../src/components/alert-dialog/alert-context/AlertDialogIcon.tsx"],"sourcesContent":["import { Danger, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../../icon'\n\nexport type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success'\n\nconst StyledIcon = styled(Icon, {\n flexShrink: 0,\n alignSelf: 'flex-start',\n variants: {\n theme: {\n info: { color: '$blue800' },\n warning: { color: '$warningMid' },\n danger: { color: '$danger', transform: 'rotate(180deg)' },\n success: { color: '$success' }\n }\n }\n})\n\nconst iconMap: Record<\n AlertDialogTheme,\n React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n info: Info,\n warning: Danger,\n danger: Info,\n success: OkCircle\n}\n\nexport const AlertDialogIcon = ({ theme }: { theme: AlertDialogTheme }) => (\n <StyledIcon theme={theme} is={iconMap[theme]} />\n)\n"],"names":["StyledIcon","styled","Icon","iconMap","Info","Danger","OkCircle","AlertDialogIcon","theme","React"],"mappings":"sLASA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,WAAY,EACZ,UAAW,aACX,SAAU,CACR,MAAO,CACL,KAAM,CAAE,MAAO,UAAW,EAC1B,QAAS,CAAE,MAAO,aAAc,EAChC,OAAQ,CAAE,MAAO,UAAW,UAAW,gBAAiB,EACxD,QAAS,CAAE,MAAO,UAAW,CAC/B,CACF,CACF,CAAC,EAEKC,EAGF,CACF,KAAMC,EACN,QAASC,EACT,OAAQD,EACR,QAASE,CACX,EAEaC,EAAkB,CAAC,CAAE,MAAAC,CAAM,IACtCC,EAAA,cAACT,EAAA,CAAW,MAAOQ,EAAO,GAAIL,EAAQK,EAAQ,CAAA"}