@clubmed/trident-ui 1.3.0-rc.4 → 1.3.1-beta.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 +59 -0
- package/molecules/Buttons/Button.js +7 -3
- package/molecules/Buttons/Button.js.map +1 -1
- package/molecules/Popin.js +15 -12
- package/molecules/Popin.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,64 @@
|
|
|
1
1
|
# ClubMed React UI components changelog
|
|
2
2
|
|
|
3
|
+
## [1.3.1-beta.1](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0...v1.3.1-beta.1) (2025-09-29)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **button:** fix missing text variant mapping with new v2 button ([41a3f36](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/41a3f36bdf59449c878c4927d373dc26cbd27d0d))
|
|
9
|
+
|
|
10
|
+
# [1.3.0](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.2.0...v1.3.0) (2025-09-10)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* **breadcrumb:** enhance accessibility testing with jest-axe ([a49a462](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/a49a462a339b21923d546efed443d37dd36336ea))
|
|
16
|
+
* **breadcrumb:** improve Breadcrumb accessibility ([a2ac951](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/a2ac9517b124f62bbceb5b8af84432234d68aee4))
|
|
17
|
+
* **button:** deprecated FakeButton & AnchorButton in favor of Button v2 and update stories ([4c5d6a0](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/4c5d6a04625f7839bd179dd277239e31d24e0ce0))
|
|
18
|
+
* **button:** fix displayName for FakeButton and improve disabled support for Button v2 ([55dea5c](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/55dea5c2f5871a1b770ab7194f9d1a16593f983a))
|
|
19
|
+
* change the npm cache location to avoid .npm creation in the workspace ([3be495a](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/3be495a54d3f01fffbe06433aca97a9f93d638bd))
|
|
20
|
+
* **ci:** test the new DinD official image ([c0a2a89](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/c0a2a896d947961ee322f8a0aa2cfb144193a625))
|
|
21
|
+
* **dependencies:** add @clubmed/trident-icons to peerDependencies and devDependencies ([ce9f885](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/ce9f885f8a20edfdfc3dd4d8ceb71008893afbca))
|
|
22
|
+
* **expandable-card:** use Button v2 instead FakeButton ([d09c88f](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/d09c88f062373504c19fb93cabbc9a33bbf1dcfd))
|
|
23
|
+
* **icons:** migrate icon imports to @clubmed/trident-icons package ([cc803d8](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/cc803d87cbad892df50093167fc25fc7c1a229bb))
|
|
24
|
+
* **molecule:** add rtl support for Link component ([ce0add4](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/ce0add4cabedd4a8b2686791d2c5d9c8a24a1f41))
|
|
25
|
+
* **molecule:** prevent DateField keyboard input outside min/max range ([2fab688](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/2fab6887cbdde445e8842a0a11f61c185596d737))
|
|
26
|
+
* **package:** update paths for utils to point to helpers ([8c22658](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/8c22658c483592f2dbd2450122f04fd9f265802b))
|
|
27
|
+
* **radio:** change props order to allow color override ([93e66a3](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/93e66a376a6d698a0a0971c08baa2e4eedf90dd2))
|
|
28
|
+
* remove unnecessary dependencies ([c2ac79e](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/c2ac79ebfb05550c34833fac39764e8b7798dad2))
|
|
29
|
+
* update stylesheet imports and adjust package.json paths ([e094368](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/e094368d6122db7d503003325cd85ffe481eb002))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
### Features
|
|
33
|
+
|
|
34
|
+
* add Chip component and his stories ([e13e2d0](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/e13e2d0baf734c7d9d5dd1f1fcd032332603d09a))
|
|
35
|
+
* add HeadingGroup component for structured headings with optional subtitles ([20bfd05](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/20bfd053a0768674b3e9278539dd13cb2b3a6e3e))
|
|
36
|
+
* **arrows:** implement Arrows component with customizable labels and button states ([ea0e6d4](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/ea0e6d450a777e7c8727d9adc04e044816965cb6))
|
|
37
|
+
* **button:** add ArrowButton component with accessibility support ([ce45b69](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/ce45b69ba2879bbccb469766a1396797bd4dc642))
|
|
38
|
+
* **button:** add component property on Button v2 and allow root tag name customization ([078d91a](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/078d91a06db14070c69cc01c30c6eaf8e9f0458a))
|
|
39
|
+
* **button:** implement new Button component with customizable styles and themes ([4895a94](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/4895a94690ba09f2c7b0792df6eddcb14076248f))
|
|
40
|
+
* **button:** refactor ButtonAnchor to use new theme and variant properties ([629f8cb](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/629f8cb884e2e908dc2e665e672038bd50620e9c))
|
|
41
|
+
* **button:** update Button types to include new color options and adjust imports ([aa70425](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/aa704255e5a0f3aa82645979738eee6f45b24f65))
|
|
42
|
+
* **clickable:** add Clickable component with keyboard accessibility and tests ([a353f45](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/a353f45ca159acc9f134a417df4b0792a49c9415))
|
|
43
|
+
* **colors:** implement color utility functions and add tests for color retrieval ([dbb9475](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/dbb94753616556638eb329c9dc70dee1b8cbb290))
|
|
44
|
+
* **elastic-height:** enhance ElasticHeight component with isExpanded prop and resize handling ([2cc9060](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/2cc9060849e91f6c78f4e7a1e57ba7bfbaa3dbcf))
|
|
45
|
+
* **expandable-card:** add ExpandableCard component with expandable functionality and associated tests ([6e123b5](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/6e123b52fc94ea13d923746a1566dc333553852c))
|
|
46
|
+
* **heading:** add Heading component with customizable levels and accessibility support ([7df9ccb](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/7df9ccbea34b54f846327c8cf170bc293e728e41))
|
|
47
|
+
* **hook:** add useResizeObserver hook with polyfill support and tests ([5baf67c](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/5baf67c0829c7d6b2af850f159863b0d25411245))
|
|
48
|
+
* **image:** add Image component with lazy loading and accessibility features ([3c2c8c9](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/3c2c8c91eb52a720d8ae94a29942101772c19ba0))
|
|
49
|
+
* introduce Card component and related stories for flexible design options ([e3f02e6](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/e3f02e6691dbf79208187ddd6912f1cb41be7a48))
|
|
50
|
+
* **molecules:** add Pagination component ([07385a3](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/07385a373044b6c9990f5f9ed0dc0f2c1c235113))
|
|
51
|
+
* **pagination:** update button components for improved accessibility and styling ([c149272](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/c14927289ba0c65e2d2c25b0a0af77b9f1c4adc9))
|
|
52
|
+
* **picture:** add Picture component with responsive image support and tests ([d32dd6f](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/d32dd6f43700b099ad8727a592a331609cc58e5d))
|
|
53
|
+
* **prose:** add Prose component for rendering HTML text with "prose" class ([e432292](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/e432292eaab2136bc2a93910fcc8a88f3b640635))
|
|
54
|
+
* **radio:** add support for Button components in RadioGroup and enhance keyboard navigation ([04b3262](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/04b3262bfb4bae8d486d9c576839a76bf0afe65a))
|
|
55
|
+
* **tabs:** enhance accessibility by adding ARIA attributes to Tab components ([6ca327c](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/6ca327c5687e9f737ee7aa1421839f841ab7e912))
|
|
56
|
+
* **tabs:** improve TabPanel accessibility by replacing display with height for animations ([3b699fb](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/3b699fb54bbef1fd8bba4dc41dfb3a4cfb14b590))
|
|
57
|
+
* **tag:** add iconWidth prop and default width handling; update Switch styles ([9e4cc95](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/9e4cc957c539f3adc26046f1e029af0f42cbe90d))
|
|
58
|
+
* **tag:** add Tag component with customizable themes, colors, and icon support ([3e1e771](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/3e1e7711fe92256b5bae3625af4b0180234fd6be))
|
|
59
|
+
* **tailwind:** update tailwind configuration from DCX ([f55fe54](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/f55fe5407deb0bc408f3a7f464951e485c1fc56c))
|
|
60
|
+
* **theme:** define Theme type with color options and generic themes ([0ae6bda](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/0ae6bda5c843b89c3e2ccc3fe8679ddde38b7755))
|
|
61
|
+
|
|
3
62
|
# [1.3.0-rc.4](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-rc.3...v1.3.0-rc.4) (2025-08-14)
|
|
4
63
|
|
|
5
64
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as i } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { Button as
|
|
3
|
+
import { Button as l } from "./v2/Button.js";
|
|
4
4
|
const a = {
|
|
5
5
|
white: {
|
|
6
6
|
color: "white",
|
|
@@ -27,6 +27,10 @@ const a = {
|
|
|
27
27
|
size: "small",
|
|
28
28
|
variant: void 0
|
|
29
29
|
},
|
|
30
|
+
text: {
|
|
31
|
+
size: "medium",
|
|
32
|
+
variant: void 0
|
|
33
|
+
},
|
|
30
34
|
icon: {
|
|
31
35
|
variant: "circle",
|
|
32
36
|
label: void 0
|
|
@@ -43,7 +47,7 @@ const a = {
|
|
|
43
47
|
...a[t.theme] || {},
|
|
44
48
|
...r[t.variant] || {}
|
|
45
49
|
};
|
|
46
|
-
return /* @__PURE__ */ l
|
|
50
|
+
return /* @__PURE__ */ i(l, { ...e, children: [
|
|
47
51
|
e.label,
|
|
48
52
|
t.children
|
|
49
53
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../lib/molecules/Buttons/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode } from 'react';\nimport { Button as ButtonV2, type ButtonProps as ButtonPropsV2 } from './v2/Button.js';\nimport type { IconicNames, IconicTypes } from '@clubmed/trident-icons';\n\nexport const BUTTON_THEME_LEGACY: any = {\n white: {\n color: 'white',\n theme: 'solid',\n },\n black: {\n color: 'black',\n theme: 'solid',\n },\n yellow: {\n color: 'saffron',\n theme: 'solid',\n },\n whiteStroke: {\n color: 'white',\n theme: 'outline',\n },\n blackStroke: {\n color: 'black',\n theme: 'outline',\n },\n};\n\nexport const BUTTON_VARIANT_LEGACY: any = {\n textSmall: {\n size: 'small',\n variant: undefined,\n },\n icon: {\n variant: 'circle',\n label: undefined,\n },\n arrow: {\n variant: 'circle',\n label: undefined,\n size: 'large',\n },\n};\n\nexport type ButtonPropsLegacy = {\n /**\n * Button themes defining background color and text/icon color\n */\n theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke' | ButtonPropsV2['theme'];\n /**\n * Is it a text button? An icon button? An arrow button?\n */\n variant?: 'text' | 'textSmall' | 'icon' | 'arrow' | 'monogram' | ButtonPropsV2['variant'];\n /**\n * Background Color override\n * Ideally please use ONLY for the \"white\" and \"black\" themes\n * @deprecated\n */\n backgroundOverride?: string;\n /**\n * Button contents\n * @deprecated\n */\n label?: string;\n /**\n * Optional children (you might never use this, please actually try to avoid it)\n */\n children?: ReactNode;\n /**\n * Optional icon name\n */\n icon?: IconicNames;\n /**\n * Force the icon type to be svg, font or default\n */\n iconType?: IconicTypes;\n /**\n * Group name\n * Used to group buttons together (you might not need this)\n * @deprecated\n */\n groupName?: string;\n /**\n * @deprecated use `data-testid` instead\n */\n dataTestId?: string;\n};\n\nexport type CommonButtonProps = Omit<ButtonPropsV2, 'theme' | 'variant'> & ButtonPropsLegacy;\n\ntype ButtonProps = CommonButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Button: FunctionComponent<ButtonProps> = ({ dataTestId, ...props }) => {\n const opts = {\n 'data-testid': dataTestId,\n ...props,\n ...(BUTTON_THEME_LEGACY[props.theme!] || {}),\n ...(BUTTON_VARIANT_LEGACY[props.variant!] || {}),\n };\n\n return (\n <ButtonV2 {...opts}>\n {opts.label}\n {props.children}\n </ButtonV2>\n );\n};\n\nButton.displayName = 'Button';\n"],"names":["BUTTON_THEME_LEGACY","BUTTON_VARIANT_LEGACY","Button","dataTestId","props","opts","jsxs","ButtonV2"],"mappings":";;;AAIO,MAAMA,IAA2B;AAAA,EACtC,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX,GAEaC,IAA6B;AAAA,EACxC,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,GAkDaC,IAAyC,CAAC,EAAE,YAAAC,GAAY,GAAGC,QAAY;AAClF,QAAMC,IAAO;AAAA,IACX,eAAeF;AAAA,IACf,GAAGC;AAAA,IACH,GAAIJ,EAAoBI,EAAM,KAAM,KAAK,CAAA;AAAA,IACzC,GAAIH,EAAsBG,EAAM,OAAQ,KAAK,CAAA;AAAA,EAAC;AAGhD,SACE,gBAAAE,EAACC,GAAA,EAAU,GAAGF,GACX,UAAA;AAAA,IAAAA,EAAK;AAAA,IACLD,EAAM;AAAA,EAAA,GACT;AAEJ;AAEAF,EAAO,cAAc;"}
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../lib/molecules/Buttons/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode } from 'react';\nimport { Button as ButtonV2, type ButtonProps as ButtonPropsV2 } from './v2/Button.js';\nimport type { IconicNames, IconicTypes } from '@clubmed/trident-icons';\n\nexport const BUTTON_THEME_LEGACY: any = {\n white: {\n color: 'white',\n theme: 'solid',\n },\n black: {\n color: 'black',\n theme: 'solid',\n },\n yellow: {\n color: 'saffron',\n theme: 'solid',\n },\n whiteStroke: {\n color: 'white',\n theme: 'outline',\n },\n blackStroke: {\n color: 'black',\n theme: 'outline',\n },\n};\n\nexport const BUTTON_VARIANT_LEGACY: any = {\n textSmall: {\n size: 'small',\n variant: undefined,\n },\n text: {\n size: 'medium',\n variant: undefined,\n },\n icon: {\n variant: 'circle',\n label: undefined,\n },\n arrow: {\n variant: 'circle',\n label: undefined,\n size: 'large',\n },\n};\n\nexport type ButtonPropsLegacy = {\n /**\n * Button themes defining background color and text/icon color\n */\n theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke' | ButtonPropsV2['theme'];\n /**\n * Is it a text button? An icon button? An arrow button?\n */\n variant?: 'text' | 'textSmall' | 'icon' | 'arrow' | 'monogram' | ButtonPropsV2['variant'];\n /**\n * Background Color override\n * Ideally please use ONLY for the \"white\" and \"black\" themes\n * @deprecated\n */\n backgroundOverride?: string;\n /**\n * Button contents\n * @deprecated\n */\n label?: string;\n /**\n * Optional children (you might never use this, please actually try to avoid it)\n */\n children?: ReactNode;\n /**\n * Optional icon name\n */\n icon?: IconicNames;\n /**\n * Force the icon type to be svg, font or default\n */\n iconType?: IconicTypes;\n /**\n * Group name\n * Used to group buttons together (you might not need this)\n * @deprecated\n */\n groupName?: string;\n /**\n * @deprecated use `data-testid` instead\n */\n dataTestId?: string;\n};\n\nexport type CommonButtonProps = Omit<ButtonPropsV2, 'theme' | 'variant'> & ButtonPropsLegacy;\n\ntype ButtonProps = CommonButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Button: FunctionComponent<ButtonProps> = ({ dataTestId, ...props }) => {\n const opts = {\n 'data-testid': dataTestId,\n ...props,\n ...(BUTTON_THEME_LEGACY[props.theme!] || {}),\n ...(BUTTON_VARIANT_LEGACY[props.variant!] || {}),\n };\n\n return (\n <ButtonV2 {...opts}>\n {opts.label}\n {props.children}\n </ButtonV2>\n );\n};\n\nButton.displayName = 'Button';\n"],"names":["BUTTON_THEME_LEGACY","BUTTON_VARIANT_LEGACY","Button","dataTestId","props","opts","jsxs","ButtonV2"],"mappings":";;;AAIO,MAAMA,IAA2B;AAAA,EACtC,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX,GAEaC,IAA6B;AAAA,EACxC,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,GAkDaC,IAAyC,CAAC,EAAE,YAAAC,GAAY,GAAGC,QAAY;AAClF,QAAMC,IAAO;AAAA,IACX,eAAeF;AAAA,IACf,GAAGC;AAAA,IACH,GAAIJ,EAAoBI,EAAM,KAAM,KAAK,CAAA;AAAA,IACzC,GAAIH,EAAsBG,EAAM,OAAQ,KAAK,CAAA;AAAA,EAAC;AAGhD,SACE,gBAAAE,EAACC,GAAA,EAAU,GAAGF,GACX,UAAA;AAAA,IAAAA,EAAK;AAAA,IACLD,EAAM;AAAA,EAAA,GACT;AAEJ;AAEAF,EAAO,cAAc;"}
|
package/molecules/Popin.js
CHANGED
|
@@ -1,38 +1,41 @@
|
|
|
1
1
|
import { jsx as t, jsxs as d } from "react/jsx-runtime";
|
|
2
2
|
import { useTransition as f, config as p, animated as x } from "@react-spring/web";
|
|
3
3
|
import { Backdrop as h } from "./Backdrop.js";
|
|
4
|
-
import { Button as
|
|
5
|
-
import { c as
|
|
4
|
+
import { Button as v } from "./Buttons/Button.js";
|
|
5
|
+
import { c as u } from "../chunks/index.js";
|
|
6
6
|
const b = ({ closeLabel: e, onClose: r }) => /* @__PURE__ */ t(
|
|
7
|
-
|
|
7
|
+
v,
|
|
8
8
|
{
|
|
9
|
+
theme: "black",
|
|
10
|
+
variant: "icon",
|
|
9
11
|
color: "black",
|
|
10
12
|
variant: "circle",
|
|
11
13
|
icon: "CrossDefault",
|
|
12
14
|
className: "mx-auto",
|
|
15
|
+
label: e,
|
|
13
16
|
"aria-label": e,
|
|
14
17
|
onClick: r
|
|
15
18
|
}
|
|
16
19
|
), j = ({
|
|
17
20
|
title: e,
|
|
18
21
|
children: r,
|
|
19
|
-
closeLabel:
|
|
20
|
-
onClose:
|
|
21
|
-
isVisible:
|
|
22
|
+
closeLabel: c,
|
|
23
|
+
onClose: o,
|
|
24
|
+
isVisible: a,
|
|
22
25
|
className: i = "sm:w-360",
|
|
23
|
-
Footer:
|
|
26
|
+
Footer: n = b
|
|
24
27
|
}) => {
|
|
25
|
-
const s = f(
|
|
28
|
+
const s = f(a, {
|
|
26
29
|
from: { scale: 0.3, opacity: 0.3 },
|
|
27
30
|
enter: { scale: 1, opacity: 1 },
|
|
28
31
|
leave: { scale: 0, opacity: 0 },
|
|
29
|
-
config:
|
|
32
|
+
config: a ? { tension: 120, friction: 20 } : p.gentle
|
|
30
33
|
});
|
|
31
|
-
return /* @__PURE__ */ t(h, { isVisible:
|
|
34
|
+
return /* @__PURE__ */ t(h, { isVisible: a, onClose: o, children: s(
|
|
32
35
|
(l, m) => m && /* @__PURE__ */ t(
|
|
33
36
|
x.div,
|
|
34
37
|
{
|
|
35
|
-
className:
|
|
38
|
+
className: u(
|
|
36
39
|
"border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white",
|
|
37
40
|
i
|
|
38
41
|
),
|
|
@@ -40,7 +43,7 @@ const b = ({ closeLabel: e, onClose: r }) => /* @__PURE__ */ t(
|
|
|
40
43
|
children: /* @__PURE__ */ d("div", { className: "p-40 text-center max-h-[90vh] flex flex-col", children: [
|
|
41
44
|
e && /* @__PURE__ */ t("div", { className: "mt-12 text-h5 text-start font-serif", children: e }),
|
|
42
45
|
/* @__PURE__ */ t("div", { className: "mt-12 mb-40 last:mb-0 text-start overflow-auto", children: r }),
|
|
43
|
-
|
|
46
|
+
n && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(n, { closeLabel: c, onClose: o }) })
|
|
44
47
|
] })
|
|
45
48
|
}
|
|
46
49
|
)
|
package/molecules/Popin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { animated, config, useTransition } from '@react-spring/web';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport { Button } from './Buttons/Button';\nimport classnames from 'classnames';\n\nexport type ClosePopinCallback = () => void;\n\ninterface PopinFooterProps {\n closeLabel: string;\n onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n return (\n <Button\n color=\"black\"\n variant=\"circle\"\n icon=\"CrossDefault\"\n className=\"mx-auto\"\n aria-label={closeLabel}\n onClick={onClose}\n />\n );\n};\n\nexport interface PopinProps {\n title: ReactNode;\n closeLabel: string;\n onClose: ClosePopinCallback;\n isVisible: boolean;\n className?: string;\n showCloseButton?: boolean;\n Footer?: FunctionComponent<PopinFooterProps> | false;\n}\n\nexport const Popin: FunctionComponent<PropsWithChildren<PopinProps>> = ({\n title,\n children,\n closeLabel,\n onClose,\n isVisible,\n className = 'sm:w-360',\n Footer = PopinFooter,\n}) => {\n const transitions = useTransition(isVisible, {\n from: { scale: 0.3, opacity: 0.3 },\n enter: { scale: 1, opacity: 1 },\n leave: { scale: 0, opacity: 0 },\n config: isVisible ? { tension: 120, friction: 20 } : config.gentle,\n });\n\n return (\n <Backdrop isVisible={isVisible} onClose={onClose}>\n {transitions(\n (style, item) =>\n item && (\n <animated.div\n className={classnames(\n 'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white',\n className,\n )}\n style={style}\n >\n <div className=\"p-40 text-center max-h-[90vh] flex flex-col\">\n {title && <div className=\"mt-12 text-h5 text-start font-serif\">{title}</div>}\n <div className=\"mt-12 mb-40 last:mb-0 text-start overflow-auto\">{children}</div>\n {Footer && (\n <div>\n <Footer closeLabel={closeLabel} onClose={onClose} />\n </div>\n )}\n </div>\n </animated.div>\n ),\n )}\n </Backdrop>\n );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","Footer","transitions","useTransition","config","Backdrop","style","item","animated","classnames","jsxs"],"mappings":";;;;;AAcA,MAAMA,IAAc,CAAC,EAAE,YAAAC,GAAY,SAAAC,QAE/B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,
|
|
1
|
+
{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { animated, config, useTransition } from '@react-spring/web';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport { Button } from './Buttons/Button';\nimport classnames from 'classnames';\n\nexport type ClosePopinCallback = () => void;\n\ninterface PopinFooterProps {\n closeLabel: string;\n onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n return (\n <Button\n theme=\"black\"\n variant=\"icon\"\n color=\"black\"\n variant=\"circle\"\n icon=\"CrossDefault\"\n className=\"mx-auto\"\n label={closeLabel}\n aria-label={closeLabel}\n onClick={onClose}\n />\n );\n};\n\nexport interface PopinProps {\n title: ReactNode;\n closeLabel: string;\n onClose: ClosePopinCallback;\n isVisible: boolean;\n className?: string;\n showCloseButton?: boolean;\n Footer?: FunctionComponent<PopinFooterProps> | false;\n}\n\nexport const Popin: FunctionComponent<PropsWithChildren<PopinProps>> = ({\n title,\n children,\n closeLabel,\n onClose,\n isVisible,\n className = 'sm:w-360',\n Footer = PopinFooter,\n}) => {\n const transitions = useTransition(isVisible, {\n from: { scale: 0.3, opacity: 0.3 },\n enter: { scale: 1, opacity: 1 },\n leave: { scale: 0, opacity: 0 },\n config: isVisible ? { tension: 120, friction: 20 } : config.gentle,\n });\n\n return (\n <Backdrop isVisible={isVisible} onClose={onClose}>\n {transitions(\n (style, item) =>\n item && (\n <animated.div\n className={classnames(\n 'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white',\n className,\n )}\n style={style}\n >\n <div className=\"p-40 text-center max-h-[90vh] flex flex-col\">\n {title && <div className=\"mt-12 text-h5 text-start font-serif\">{title}</div>}\n <div className=\"mt-12 mb-40 last:mb-0 text-start overflow-auto\">{children}</div>\n {Footer && (\n <div>\n <Footer closeLabel={closeLabel} onClose={onClose} />\n </div>\n )}\n </div>\n </animated.div>\n ),\n )}\n </Backdrop>\n );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","Footer","transitions","useTransition","config","Backdrop","style","item","animated","classnames","jsxs"],"mappings":";;;;;AAcA,MAAMA,IAAc,CAAC,EAAE,YAAAC,GAAY,SAAAC,QAE/B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAOH;AAAA,IACP,cAAYA;AAAA,IACZ,SAASC;AAAA,EAAA;AAAA,GAeFG,IAA0D,CAAC;AAAA,EACtE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAN;AAAA,EACA,SAAAC;AAAA,EACA,WAAAM;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAASV;AACX,MAAM;AACJ,QAAMW,IAAcC,EAAcJ,GAAW;AAAA,IAC3C,MAAM,EAAE,OAAO,KAAK,SAAS,IAAA;AAAA,IAC7B,OAAO,EAAE,OAAO,GAAG,SAAS,EAAA;AAAA,IAC5B,OAAO,EAAE,OAAO,GAAG,SAAS,EAAA;AAAA,IAC5B,QAAQA,IAAY,EAAE,SAAS,KAAK,UAAU,GAAA,IAAOK,EAAO;AAAA,EAAA,CAC7D;AAED,SACE,gBAAAV,EAACW,GAAA,EAAS,WAAAN,GAAsB,SAAAN,GAC7B,UAAAS;AAAA,IACC,CAACI,GAAOC,MACNA,KACE,gBAAAb;AAAA,MAACc,EAAS;AAAA,MAAT;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAT;AAAA,QAAA;AAAA,QAEF,OAAAM;AAAA,QAEA,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+CACZ,UAAA;AAAA,UAAAb,KAAS,gBAAAH,EAAC,OAAA,EAAI,WAAU,uCAAuC,UAAAG,GAAM;AAAA,UACtE,gBAAAH,EAAC,OAAA,EAAI,WAAU,kDAAkD,UAAAI,EAAA,CAAS;AAAA,UACzEG,KACC,gBAAAP,EAAC,OAAA,EACC,4BAACO,GAAA,EAAO,YAAAT,GAAwB,SAAAC,GAAkB,EAAA,CACpD;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAGR;AAEJ;"}
|