@mittwald/flow-react-components 1.5.0-next.44 → 1.5.0-next.46
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/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs +14 -5
- package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs.map +1 -1
- package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.module.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
|
|
4
4
|
import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
|
|
5
|
+
import { containsTextChild } from "../../lib/react/remote.mjs";
|
|
5
6
|
import { isAlphaColor } from "../../lib/types/props.mjs";
|
|
6
7
|
import { Text } from "../Text/Text.mjs";
|
|
7
8
|
import HeaderNavigation_module_default from "./HeaderNavigation.module.mjs";
|
|
@@ -12,20 +13,28 @@ import { jsx } from "react/jsx-runtime";
|
|
|
12
13
|
var HeaderNavigation = (props) => {
|
|
13
14
|
const { children, className, color = "default", ...rest } = props;
|
|
14
15
|
const rootClassName = clsx(HeaderNavigation_module_default.headerNavigation, isAlphaColor(color) && HeaderNavigation_module_default[color], className);
|
|
16
|
+
const buttonPropsContext = {
|
|
17
|
+
className: HeaderNavigation_module_default.button,
|
|
18
|
+
color: isAlphaColor(color) ? color : "secondary",
|
|
19
|
+
variant: "plain"
|
|
20
|
+
};
|
|
15
21
|
const propsContext = {
|
|
16
22
|
Link: {
|
|
17
23
|
wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item }),
|
|
18
24
|
className: HeaderNavigation_module_default.link,
|
|
19
25
|
unstyled: true,
|
|
20
|
-
|
|
26
|
+
/**
|
|
27
|
+
* `Text` clears the props context, so a link combined with a button must
|
|
28
|
+
* not get it — the button would lose the context of `Link`.
|
|
29
|
+
*/
|
|
30
|
+
children: dynamic((props) => containsTextChild(props.children) ? /* @__PURE__ */ jsx(Text, {
|
|
21
31
|
emulateBoldWidth: true,
|
|
22
32
|
children: props.children
|
|
23
|
-
}))
|
|
33
|
+
}) : props.children),
|
|
34
|
+
Button: buttonPropsContext
|
|
24
35
|
},
|
|
25
36
|
Button: {
|
|
26
|
-
|
|
27
|
-
color: isAlphaColor(color) ? color : "secondary",
|
|
28
|
-
variant: "plain",
|
|
37
|
+
...buttonPropsContext,
|
|
29
38
|
wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item })
|
|
30
39
|
}
|
|
31
40
|
};
|
package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderNavigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" */\n color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li className={styles.item} />,\n className: styles.link,\n unstyled: true,\n children: dynamic((props)
|
|
1
|
+
{"version":3,"file":"HeaderNavigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" */\n color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const buttonPropsContext = {\n className: styles.button,\n color: isAlphaColor(color) ? color : \"secondary\",\n variant: \"plain\",\n } as const;\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li className={styles.item} />,\n className: styles.link,\n unstyled: true,\n /**\n * `Text` clears the props context, so a link combined with a button must\n * not get it — the button would lose the context of `Link`.\n */\n children: dynamic((props) =>\n containsTextChild(props.children) ? (\n <Text emulateBoldWidth>{props.children}</Text>\n ) : (\n props.children\n ),\n ),\n Button: buttonPropsContext,\n },\n Button: {\n ...buttonPropsContext,\n wrapWith: <li className={styles.item} />,\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest}>\n <ul className={styles.list}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n </nav>\n );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpBA,gCAAO,kBACP,aAAa,KAAK,KAAKA,gCAAO,QAC9B,SACF;CAEA,MAAM,qBAAqB;EACzB,WAAWA,gCAAO;EAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;EACrC,SAAS;CACX;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,EAAI,WAAWA,gCAAO,KAAO,CAAA;GACvC,WAAWA,gCAAO;GAClB,UAAU;;;;;GAKV,UAAU,SAAS,UACjB,kBAAkB,MAAM,QAAQ,IAC9B,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,IAE7C,MAAM,QAEV;GACA,QAAQ;EACV;EACA,QAAQ;GACN,GAAG;GACH,UAAU,oBAAC,MAAD,EAAI,WAAWA,gCAAO,KAAO,CAAA;EACzC;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD;GAAI,WAAWA,gCAAO;GACpB,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA;CACD,CAAA;AAET"}
|
package/dist/js/packages/components/src/components/HeaderNavigation/HeaderNavigation.module.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n .list {\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n gap: var(--header-navigation--spacing);\n }\n\n .item {\n list-style: none;\n }\n\n .link {\n padding: var(--header-navigation--padding);\n border-radius: var(--header-navigation--corner-radius);\n color: var(--header-navigation--color);\n position: relative;\n\n @include focus.focus;\n\n &:hover:not([aria-current]) {\n background-color: var(--header-navigation--background-color--hover);\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(--header-navigation--background-color--pressed);\n }\n\n &[aria-current] {\n font-weight: var(--header-navigation--font-weight-current);\n\n &::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n background-color: var(--header-navigation--color);\n height: var(--header-navigation--underline-width-current);\n }\n }\n }\n\n .button {\n color: var(--header-navigation--color);\n border-radius: var(--header-navigation--corner-radius-round);\n\n &:hover,\n &[data-pressed] {\n color: var(--header-navigation--color);\n }\n }\n\n /* Color */\n\n @mixin color($color) {\n &.#{$color} {\n .link,\n .button {\n color: var(--header-navigation--color-#{$color});\n\n &:hover:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--hover\n );\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--pressed\n );\n }\n\n &[aria-current] {\n &::after {\n background-color: var(--header-navigation--color-#{$color});\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n .list {\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n gap: var(--header-navigation--spacing);\n }\n\n .item {\n list-style: none;\n }\n\n .link {\n padding: var(--header-navigation--padding);\n border-radius: var(--header-navigation--corner-radius);\n color: var(--header-navigation--color);\n position: relative;\n\n @include focus.focus;\n\n /* Combined with a Button, the Button carries the look */\n &:has(> .button) {\n display: block;\n padding: 0;\n border-radius: var(--header-navigation--corner-radius-round);\n }\n }\n\n .link:not(:has(> .button)) {\n &:hover:not([aria-current]) {\n background-color: var(--header-navigation--background-color--hover);\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(--header-navigation--background-color--pressed);\n }\n\n &[aria-current] {\n font-weight: var(--header-navigation--font-weight-current);\n\n &::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n background-color: var(--header-navigation--color);\n height: var(--header-navigation--underline-width-current);\n }\n }\n }\n\n .button {\n color: var(--header-navigation--color);\n border-radius: var(--header-navigation--corner-radius-round);\n\n &:hover,\n &[data-pressed] {\n color: var(--header-navigation--color);\n }\n }\n\n /* Color */\n\n @mixin color($color) {\n &.#{$color} {\n .link,\n .button {\n color: var(--header-navigation--color-#{$color});\n }\n\n .link:not(:has(> .button)),\n .button {\n &:hover:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--hover\n );\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--pressed\n );\n }\n\n &[aria-current] {\n &::after {\n background-color: var(--header-navigation--color-#{$color});\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.5.0-next.
|
|
3
|
+
"version": "1.5.0-next.46",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
"@internationalized/string-compiler": "^3.4.1",
|
|
85
85
|
"@lezer/common": "^1.5.2",
|
|
86
86
|
"@lezer/highlight": "^1.2.3",
|
|
87
|
-
"@mittwald/flow-icons": "^1.5.0-next.
|
|
87
|
+
"@mittwald/flow-icons": "^1.5.0-next.46",
|
|
88
88
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
89
|
-
"@mittwald/react-tunnel": "^1.5.0-next.
|
|
89
|
+
"@mittwald/react-tunnel": "^1.5.0-next.46",
|
|
90
90
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
91
91
|
"@react-aria/form": "^3.2.1",
|
|
92
92
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -139,12 +139,12 @@
|
|
|
139
139
|
"@internationalized/date": "^3.12.3",
|
|
140
140
|
"@lezer/generator": "^1.8.0",
|
|
141
141
|
"@lezer/lr": "^1.4.10",
|
|
142
|
-
"@mittwald/flow-core": "1.5.0-next.
|
|
143
|
-
"@mittwald/flow-design-tokens": "1.5.0-next.
|
|
144
|
-
"@mittwald/flow-icons-base": "1.5.0-next.
|
|
142
|
+
"@mittwald/flow-core": "1.5.0-next.46",
|
|
143
|
+
"@mittwald/flow-design-tokens": "1.5.0-next.46",
|
|
144
|
+
"@mittwald/flow-icons-base": "1.5.0-next.46",
|
|
145
145
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
146
146
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
147
|
-
"@mittwald/typescript-config": "1.5.0-next.
|
|
147
|
+
"@mittwald/typescript-config": "1.5.0-next.46",
|
|
148
148
|
"@nx/storybook": "^22.7.6",
|
|
149
149
|
"@storybook/addon-a11y": "^10.5.10",
|
|
150
150
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
},
|
|
199
199
|
"peerDependencies": {
|
|
200
200
|
"@internationalized/date": "^3.12.2",
|
|
201
|
-
"@mittwald/flow-icons-pro": "1.5.0-next.
|
|
201
|
+
"@mittwald/flow-icons-pro": "1.5.0-next.46",
|
|
202
202
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
203
203
|
"next": "^16.2.3",
|
|
204
204
|
"react": "^19.2.0",
|
|
@@ -222,5 +222,5 @@
|
|
|
222
222
|
"browserslist": [
|
|
223
223
|
"baseline widely available"
|
|
224
224
|
],
|
|
225
|
-
"gitHead": "
|
|
225
|
+
"gitHead": "7543ec40ac1d7d76c8b7ba573daba038660b659d"
|
|
226
226
|
}
|