@frontify/fondue-components 1.0.1 → 1.1.0
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.
|
@@ -14,9 +14,9 @@ const o = {
|
|
|
14
14
|
full: "tw-rounded-full"
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
|
-
small: "tw-
|
|
18
|
-
medium: "tw-
|
|
19
|
-
large: "tw-
|
|
17
|
+
small: "tw-h-6 tw-text-body-small",
|
|
18
|
+
medium: "tw-h-9 tw-text-body-medium",
|
|
19
|
+
large: "tw-h-12 tw-text-body-large"
|
|
20
20
|
},
|
|
21
21
|
iconOnly: {
|
|
22
22
|
true: "tw-aspect-square tw-px-0"
|
|
@@ -112,6 +112,21 @@ const o = {
|
|
|
112
112
|
style: "loud",
|
|
113
113
|
emphasis: "strong",
|
|
114
114
|
class: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
iconOnly: !1,
|
|
118
|
+
size: "small",
|
|
119
|
+
class: "tw-px-2"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
iconOnly: !1,
|
|
123
|
+
size: "medium",
|
|
124
|
+
class: "tw-px-4"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
iconOnly: !1,
|
|
128
|
+
size: "small",
|
|
129
|
+
class: "tw-px-6"
|
|
115
130
|
}
|
|
116
131
|
],
|
|
117
132
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components7.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps } from '@frontify/fondue-icons';\n\nimport { sv } from '#/utilities/styleUtilities';\n\nimport { type ButtonProps } from '../Button';\n\nexport const buttonIconSizeMap: { [buttonSize in Exclude<ButtonProps['size'], undefined>]: FondueIconProps['size'] } = {\n small: 16,\n medium: 20,\n large: 24,\n};\n\nexport const buttonStyles = sv({\n base: 'tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium',\n variants: {\n disabled: {\n true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n },\n rounding: {\n medium: 'tw-rounded',\n full: 'tw-rounded-full',\n },\n size: {\n small: 'tw-
|
|
1
|
+
{"version":3,"file":"fondue-components7.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps } from '@frontify/fondue-icons';\n\nimport { sv } from '#/utilities/styleUtilities';\n\nimport { type ButtonProps } from '../Button';\n\nexport const buttonIconSizeMap: { [buttonSize in Exclude<ButtonProps['size'], undefined>]: FondueIconProps['size'] } = {\n small: 16,\n medium: 20,\n large: 24,\n};\n\nexport const buttonStyles = sv({\n base: 'tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium',\n variants: {\n disabled: {\n true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n },\n rounding: {\n medium: 'tw-rounded',\n full: 'tw-rounded-full',\n },\n size: {\n small: 'tw-h-6 tw-text-body-small',\n medium: 'tw-h-9 tw-text-body-medium',\n large: 'tw-h-12 tw-text-body-large',\n },\n iconOnly: {\n true: 'tw-aspect-square tw-px-0',\n },\n hugWidth: {\n false: 'tw-w-full',\n },\n emphasis: {\n default: '',\n weak: '',\n strong: '',\n },\n style: {\n default: '',\n positive: '',\n negative: '',\n danger: '',\n loud: '',\n },\n },\n compoundVariants: [\n {\n style: 'default',\n emphasis: 'default',\n class:\n 'tw-bg-button-background tw-border-button-border ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n style: 'default',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n style: 'default',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-background tw-border-button-strong-border ' +\n 'hover:tw-bg-button-strong-background-hover ' +\n 'active:tw-bg-button-strong-background-pressed',\n },\n {\n style: 'positive',\n emphasis: 'default',\n class:\n 'tw-bg-button-positive-background tw-border-button-positive-border ' +\n 'hover:tw-bg-button-positive-background-hover ' +\n 'active:tw-bg-button-positive-background-pressed',\n },\n {\n style: 'positive',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +\n 'active:tw-bg-button-positive-background-pressed',\n },\n {\n style: 'positive',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +\n 'hover:tw-bg-button-strong-positive-background-hover ' +\n 'active:tw-bg-button-strong-positive-background-pressed',\n },\n {\n style: 'negative',\n emphasis: 'default',\n class:\n 'tw-bg-button-negative-background tw-border-button-negative-border ' +\n 'hover:tw-bg-button-negative-background-hover ' +\n 'active:tw-bg-button-negative-background-pressed',\n },\n {\n style: 'negative',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +\n 'active:tw-bg-button-negative-background-pressed',\n },\n {\n style: 'negative',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +\n 'hover:tw-bg-button-strong-negative-background-hover ' +\n 'active:tw-bg-button-strong-negative-background-pressed',\n },\n {\n style: 'danger',\n emphasis: 'default',\n class:\n 'tw-bg-button-background tw-border-button-border ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n style: 'danger',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n style: 'danger',\n emphasis: 'strong',\n class:\n 'tw-bg-button-danger-background tw-border-button-danger-border ' +\n 'hover:tw-bg-button-danger-background-hover ' +\n 'active:tw-bg-button-danger-background-pressed',\n },\n {\n style: 'loud',\n emphasis: 'default',\n class:\n 'tw-bg-box-selected tw-border-button-border ' +\n 'hover:tw-bg-box-selected-hover ' +\n 'active:tw-bg-box-selected-pressed ',\n },\n {\n style: 'loud',\n emphasis: 'weak',\n class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n },\n {\n style: 'loud',\n emphasis: 'strong',\n class:\n 'tw-bg-box-selected-strong tw-border-box-selected-strong ' +\n 'hover:tw-bg-box-selected-strong-hover ' +\n 'active:tw-bg-box-selected-strong-pressed ',\n },\n {\n iconOnly: false,\n size: 'small',\n class: 'tw-px-2',\n },\n {\n iconOnly: false,\n size: 'medium',\n class: 'tw-px-4',\n },\n {\n iconOnly: false,\n size: 'small',\n class: 'tw-px-6',\n },\n ],\n defaultVariants: {\n style: 'default',\n emphasis: 'strong',\n size: 'medium',\n rounding: 'medium',\n hugWidth: true,\n },\n});\n"],"names":["buttonIconSizeMap","buttonStyles","sv"],"mappings":";AAQO,MAAMA,IAA0G;AAAA,EACnH,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEaC,IAAeC,EAAG;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,EACd;AACJ,CAAC;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@frontify/fondue-components",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0
|
|
4
|
+
"version": "1.1.0",
|
|
5
5
|
"homepage": "https://github.com/Frontify/fondue",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -38,15 +38,16 @@
|
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@etchteam/storybook-addon-status": "^4.2.4",
|
|
40
40
|
"@frontify/eslint-config-react": "^0.17.6",
|
|
41
|
-
"@frontify/fondue-tokens": "^3.5.0",
|
|
42
41
|
"@playwright/experimental-ct-react": "1.41.2",
|
|
43
42
|
"@storybook/addon-a11y": "^8.0.8",
|
|
44
43
|
"@storybook/addon-essentials": "^8.0.8",
|
|
45
44
|
"@storybook/addon-interactions": "^8.0.8",
|
|
46
45
|
"@storybook/addon-links": "^8.0.8",
|
|
47
46
|
"@storybook/blocks": "^8.0.8",
|
|
47
|
+
"@storybook/manager-api": "^8.0.8",
|
|
48
48
|
"@storybook/react": "^8.0.8",
|
|
49
49
|
"@storybook/react-vite": "^8.0.8",
|
|
50
|
+
"@storybook/theming": "^8.0.8",
|
|
50
51
|
"@tailwindcss/forms": "^0.5.7",
|
|
51
52
|
"@testing-library/jest-dom": "^6.4.2",
|
|
52
53
|
"@testing-library/react": "^15.0.1",
|
|
@@ -55,6 +56,7 @@
|
|
|
55
56
|
"@vitejs/plugin-react": "^4.2.1",
|
|
56
57
|
"@vitest/coverage-v8": "^1.4.0",
|
|
57
58
|
"@vitest/ui": "^1.4.0",
|
|
59
|
+
"autoprefixer": "^10.4.19",
|
|
58
60
|
"chalk": "^5.3.0",
|
|
59
61
|
"eslint": "^8.57.0",
|
|
60
62
|
"eslint-plugin-notice": "^0.9.10",
|
|
@@ -75,7 +77,8 @@
|
|
|
75
77
|
"vite-plugin-dts": "^3.8.1",
|
|
76
78
|
"vite-tsconfig-paths": "^4.3.2",
|
|
77
79
|
"vitest": "^1.4.0",
|
|
78
|
-
"@frontify/fondue-icons": "^0.2.0"
|
|
80
|
+
"@frontify/fondue-icons": "^0.2.0",
|
|
81
|
+
"@frontify/fondue-tokens": "^3.5.0"
|
|
79
82
|
},
|
|
80
83
|
"scripts": {
|
|
81
84
|
"build": "vite build",
|