@dktunited-techoff/techoff-suite-ui 0.9.7 → 0.9.8

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.
Files changed (25) hide show
  1. package/esm/layouts/Header/Header.js +1 -2
  2. package/esm/layouts/Header/Header.js.map +1 -1
  3. package/esm/layouts/Header/Header.types.d.ts +1 -1
  4. package/esm/layouts/Header/__stories__/Header.stories.mdx +6 -4
  5. package/esm/layouts/Navigation/Navigation.d.ts +1 -0
  6. package/esm/layouts/Navigation/Navigation.js +8 -6
  7. package/esm/layouts/Navigation/Navigation.js.map +1 -1
  8. package/esm/layouts/Navigation/Navigation.types.d.ts +2 -2
  9. package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx +19 -13
  10. package/lib/layouts/Header/Header.js +1 -2
  11. package/lib/layouts/Header/Header.js.map +1 -1
  12. package/lib/layouts/Header/Header.types.d.ts +1 -1
  13. package/lib/layouts/Header/__stories__/Header.stories.mdx +6 -4
  14. package/lib/layouts/Navigation/Navigation.d.ts +1 -0
  15. package/lib/layouts/Navigation/Navigation.js +10 -7
  16. package/lib/layouts/Navigation/Navigation.js.map +1 -1
  17. package/lib/layouts/Navigation/Navigation.types.d.ts +2 -2
  18. package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx +19 -13
  19. package/package.json +1 -1
  20. package/src/layouts/Header/Header.tsx +1 -4
  21. package/src/layouts/Header/Header.types.ts +1 -1
  22. package/src/layouts/Header/__stories__/Header.stories.mdx +6 -4
  23. package/src/layouts/Navigation/Navigation.tsx +13 -17
  24. package/src/layouts/Navigation/Navigation.types.ts +1 -1
  25. package/src/layouts/Navigation/__stories__/Navigation.stories.mdx +19 -13
package/esm/layouts/Header/Header.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { cloneElement } from 'react';
3
2
  import { icons } from '../../components/Icon/icons';
4
3
  import './Header.css';
5
4
  export const Header = ({ actions, appName }) => {
@@ -9,6 +8,6 @@ export const Header = ({ actions, appName }) => {
9
8
  React.createElement("div", { className: "header-left-side" },
10
9
  React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons[`header-${appName}`] } })),
11
10
  React.createElement("div", null,
12
- React.createElement("div", { className: "header-actions" }, actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))))));
11
+ React.createElement("div", { className: "header-actions" }, actions))));
13
12
  };
14
13
  //# sourceMappingURL=Header.js.map
package/esm/layouts/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAO,CAC3C,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}
package/esm/layouts/Header/Header.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
2
  export type HeaderProps = {
3
- actions: ReactElement[];
3
+ actions: ReactElement;
4
4
  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
5
5
  };
6
6
  export type HeaderProfileProps = {
package/esm/layouts/Header/__stories__/Header.stories.mdx CHANGED
@@ -24,10 +24,12 @@ The header will allow users to quickly find the information they need at a glanc
24
24
  <Story
25
25
  name="Overview"
26
26
  args={{
27
- actions: [
28
- <Button icon="add" size="lg" variant="shadow" rounded />,
29
- <HeaderProfile firstname="John" lastname="Doe" />,
30
- ],
27
+ actions: (
28
+ <>
29
+ <Button icon="add" size="lg" variant="shadow" rounded />
30
+ <HeaderProfile firstname="John" lastname="Doe" />
31
+ </>
32
+ ),
31
33
  appName: 'repairability',
32
34
  }}
33
35
  argTypes={headerArgTypes}
package/esm/layouts/Navigation/Navigation.d.ts CHANGED
@@ -2,5 +2,6 @@ import * as React from 'react';
2
2
  import { PropsWithChildren } from 'react';
3
3
  import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
4
4
  import './Navigation.css';
5
+ export declare const NavigationBreadcrumbDivider: () => React.JSX.Element;
5
6
  export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
6
7
  export declare const Navigation: ({ actions, breadcrumbs }: NavigationProps) => React.JSX.Element;
package/esm/layouts/Navigation/Navigation.js CHANGED
@@ -1,7 +1,12 @@
1
1
  import * as React from 'react';
2
- import { cloneElement } from 'react';
3
2
  import { Icon } from '../../components/Icon/Icon';
4
3
  import './Navigation.css';
4
+ export const NavigationBreadcrumbDivider = () => {
5
+ // #########
6
+ // Rendering
7
+ return (React.createElement("div", { className: "breadcrumb-chevron" },
8
+ React.createElement(Icon, { name: "chevron-right" })));
9
+ };
5
10
  export const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
6
11
  // #########
7
12
  // Rendering
@@ -17,11 +22,8 @@ export const Navigation = ({ actions, breadcrumbs }) => {
17
22
  // #########
18
23
  // Rendering
19
24
  return (React.createElement("div", { className: "navigation" },
20
- React.createElement("div", { className: "breadcrumb" }, breadcrumbs.map((breadcrumb, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
21
- breadcrumb,
22
- index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
23
- React.createElement(Icon, { name: "chevron-right" }))))))),
25
+ React.createElement("div", { className: "breadcrumb" }, breadcrumbs),
24
26
  React.createElement("div", { className: "navigation-divider" }),
25
- React.createElement("div", { className: "navigation-actions" }, actions?.map((action, index) => cloneElement(action, { key: index, ...action.props })))));
27
+ React.createElement("div", { className: "navigation-actions" }, actions)));
26
28
  };
27
29
  //# sourceMappingURL=Navigation.js.map
package/esm/layouts/Navigation/Navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CACnF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IAAE,WAAW,CAAO;QAC/C,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/layouts/Navigation/Navigation.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactElement } from 'react';
2
2
  export type NavigationProps = {
3
- actions?: ReactElement[];
4
- breadcrumbs: ReactElement[];
3
+ actions?: ReactElement;
4
+ breadcrumbs: ReactElement;
5
5
  };
6
6
  export type NavigationBreadcrumbItemProps = {
7
7
  icon?: string;
package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Navigation, NavigationBreadcrumbItem } from '../Navigation';
3
+ import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
4
4
  import { Button } from '../../../components/Button/Button';
5
5
  import { icons } from '../../../components/Icon/icons';
6
6
 
@@ -16,21 +16,27 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
16
16
  <Story
17
17
  name="Overview"
18
18
  args={{
19
- actions: [
20
- <Button icon="check" onClick={() => {}}>
21
- Action 1
22
- </Button>,
23
- <Button icon="add" onClick={() => {}}>
24
- Action 2
25
- </Button>,
26
- ],
27
- breadcrumbs: [
19
+ actions: (
20
+ <>
21
+ <Button icon="check" onClick={() => {}}>
22
+ Action 1
23
+ </Button>
24
+ <Button icon="add" onClick={() => {}}>
25
+ Action 2
26
+ </Button>
27
+ </>
28
+ ),
29
+ breadcrumbs: (
30
+ <>
28
31
  <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
29
32
  Home
30
- </NavigationBreadcrumbItem>,
31
- <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
33
+ </NavigationBreadcrumbItem>
34
+ <NavigationBreadcrumbDivider />
35
+ <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
36
+ <NavigationBreadcrumbDivider />
32
37
  <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
33
- ]
38
+ </>
39
+ )
34
40
  }}
35
41
 
36
42
  >
package/lib/layouts/Header/Header.js CHANGED
@@ -2,7 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Header = void 0;
4
4
  const React = require("react");
5
- const react_1 = require("react");
6
5
  const icons_1 = require("../../components/Icon/icons");
7
6
  require("./Header.css");
8
7
  const Header = ({ actions, appName }) => {
@@ -12,7 +11,7 @@ const Header = ({ actions, appName }) => {
12
11
  React.createElement("div", { className: "header-left-side" },
13
12
  React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons_1.icons[`header-${appName}`] } })),
14
13
  React.createElement("div", null,
15
- React.createElement("div", { className: "header-actions" }, actions.map((action, index) => (0, react_1.cloneElement)(action, { key: index, ...action.props }))))));
14
+ React.createElement("div", { className: "header-actions" }, actions))));
16
15
  };
17
16
  exports.Header = Header;
18
17
  //# sourceMappingURL=Header.js.map
package/lib/layouts/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAqC;AACrC,uDAAoD;AAEpD,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,MAAM,UAejB"}
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,uDAAoD;AAEpD,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAO,CAC3C,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,MAAM,UAajB"}
package/lib/layouts/Header/Header.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
2
  export type HeaderProps = {
3
- actions: ReactElement[];
3
+ actions: ReactElement;
4
4
  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
5
5
  };
6
6
  export type HeaderProfileProps = {
package/lib/layouts/Header/__stories__/Header.stories.mdx CHANGED
@@ -24,10 +24,12 @@ The header will allow users to quickly find the information they need at a glanc
24
24
  <Story
25
25
  name="Overview"
26
26
  args={{
27
- actions: [
28
- <Button icon="add" size="lg" variant="shadow" rounded />,
29
- <HeaderProfile firstname="John" lastname="Doe" />,
30
- ],
27
+ actions: (
28
+ <>
29
+ <Button icon="add" size="lg" variant="shadow" rounded />
30
+ <HeaderProfile firstname="John" lastname="Doe" />
31
+ </>
32
+ ),
31
33
  appName: 'repairability',
32
34
  }}
33
35
  argTypes={headerArgTypes}
package/lib/layouts/Navigation/Navigation.d.ts CHANGED
@@ -2,5 +2,6 @@ import * as React from 'react';
2
2
  import { PropsWithChildren } from 'react';
3
3
  import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
4
4
  import './Navigation.css';
5
+ export declare const NavigationBreadcrumbDivider: () => React.JSX.Element;
5
6
  export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
6
7
  export declare const Navigation: ({ actions, breadcrumbs }: NavigationProps) => React.JSX.Element;
package/lib/layouts/Navigation/Navigation.js CHANGED
@@ -1,10 +1,16 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Navigation = exports.NavigationBreadcrumbItem = void 0;
3
+ exports.Navigation = exports.NavigationBreadcrumbItem = exports.NavigationBreadcrumbDivider = void 0;
4
4
  const React = require("react");
5
- const react_1 = require("react");
6
5
  const Icon_1 = require("../../components/Icon/Icon");
7
6
  require("./Navigation.css");
7
+ const NavigationBreadcrumbDivider = () => {
8
+ // #########
9
+ // Rendering
10
+ return (React.createElement("div", { className: "breadcrumb-chevron" },
11
+ React.createElement(Icon_1.Icon, { name: "chevron-right" })));
12
+ };
13
+ exports.NavigationBreadcrumbDivider = NavigationBreadcrumbDivider;
8
14
  const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
9
15
  // #########
10
16
  // Rendering
@@ -21,12 +27,9 @@ const Navigation = ({ actions, breadcrumbs }) => {
21
27
  // #########
22
28
  // Rendering
23
29
  return (React.createElement("div", { className: "navigation" },
24
- React.createElement("div", { className: "breadcrumb" }, breadcrumbs.map((breadcrumb, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
25
- breadcrumb,
26
- index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
27
- React.createElement(Icon_1.Icon, { name: "chevron-right" }))))))),
30
+ React.createElement("div", { className: "breadcrumb" }, breadcrumbs),
28
31
  React.createElement("div", { className: "navigation-divider" }),
29
- React.createElement("div", { className: "navigation-actions" }, actions?.map((action, index) => (0, react_1.cloneElement)(action, { key: index, ...action.props })))));
32
+ React.createElement("div", { className: "navigation-actions" }, actions)));
30
33
  };
31
34
  exports.Navigation = Navigation;
32
35
  //# sourceMappingURL=Navigation.js.map
package/lib/layouts/Navigation/Navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAwD;AACxD,qDAAkD;AAElD,4BAA0B;AAEnB,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CACnF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,UAAU,cAwBrB"}
1
+ {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,qDAAkD;AAElD,4BAA0B;AAEnB,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,2BAA2B,+BAQtC;AAEK,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IAAE,WAAW,CAAO;QAC/C,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,UAAU,cAUrB"}
package/lib/layouts/Navigation/Navigation.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactElement } from 'react';
2
2
  export type NavigationProps = {
3
- actions?: ReactElement[];
4
- breadcrumbs: ReactElement[];
3
+ actions?: ReactElement;
4
+ breadcrumbs: ReactElement;
5
5
  };
6
6
  export type NavigationBreadcrumbItemProps = {
7
7
  icon?: string;
package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Navigation, NavigationBreadcrumbItem } from '../Navigation';
3
+ import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
4
4
  import { Button } from '../../../components/Button/Button';
5
5
  import { icons } from '../../../components/Icon/icons';
6
6
 
@@ -16,21 +16,27 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
16
16
  <Story
17
17
  name="Overview"
18
18
  args={{
19
- actions: [
20
- <Button icon="check" onClick={() => {}}>
21
- Action 1
22
- </Button>,
23
- <Button icon="add" onClick={() => {}}>
24
- Action 2
25
- </Button>,
26
- ],
27
- breadcrumbs: [
19
+ actions: (
20
+ <>
21
+ <Button icon="check" onClick={() => {}}>
22
+ Action 1
23
+ </Button>
24
+ <Button icon="add" onClick={() => {}}>
25
+ Action 2
26
+ </Button>
27
+ </>
28
+ ),
29
+ breadcrumbs: (
30
+ <>
28
31
  <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
29
32
  Home
30
- </NavigationBreadcrumbItem>,
31
- <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
33
+ </NavigationBreadcrumbItem>
34
+ <NavigationBreadcrumbDivider />
35
+ <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
36
+ <NavigationBreadcrumbDivider />
32
37
  <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
33
- ]
38
+ </>
39
+ )
34
40
  }}
35
41
 
36
42
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "0.9.7",
3
+ "version": "0.9.8",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/layouts/Header/Header.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { cloneElement } from 'react';
3
2
  import { icons } from '../../components/Icon/icons';
4
3
  import { HeaderProps } from './Header.types';
5
4
  import './Header.css';
@@ -13,9 +12,7 @@ export const Header = ({ actions, appName }: HeaderProps) => {
13
12
  <div className="header-techoff" dangerouslySetInnerHTML={{ __html: icons[`header-${appName}`] }} />
14
13
  </div>
15
14
  <div>
16
- <div className="header-actions">
17
- {actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))}
18
- </div>
15
+ <div className="header-actions">{actions}</div>
19
16
  </div>
20
17
  </header>
21
18
  );
package/src/layouts/Header/Header.types.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactElement } from 'react';
2
2
 
3
3
  export type HeaderProps = {
4
- actions: ReactElement[];
4
+ actions: ReactElement;
5
5
  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
6
6
  };
7
7
  export type HeaderProfileProps = { firstname: string; lastname: string; supportLink?: string };
package/src/layouts/Header/__stories__/Header.stories.mdx CHANGED
@@ -24,10 +24,12 @@ The header will allow users to quickly find the information they need at a glanc
24
24
  <Story
25
25
  name="Overview"
26
26
  args={{
27
- actions: [
28
- <Button icon="add" size="lg" variant="shadow" rounded />,
29
- <HeaderProfile firstname="John" lastname="Doe" />,
30
- ],
27
+ actions: (
28
+ <>
29
+ <Button icon="add" size="lg" variant="shadow" rounded />
30
+ <HeaderProfile firstname="John" lastname="Doe" />
31
+ </>
32
+ ),
31
33
  appName: 'repairability',
32
34
  }}
33
35
  argTypes={headerArgTypes}
package/src/layouts/Navigation/Navigation.tsx CHANGED
@@ -1,9 +1,19 @@
1
1
  import * as React from 'react';
2
- import { cloneElement, PropsWithChildren } from 'react';
2
+ import { PropsWithChildren } from 'react';
3
3
  import { Icon } from '../../components/Icon/Icon';
4
4
  import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
5
5
  import './Navigation.css';
6
6
 
7
+ export const NavigationBreadcrumbDivider = () => {
8
+ // #########
9
+ // Rendering
10
+ return (
11
+ <div className="breadcrumb-chevron">
12
+ <Icon name="chevron-right" />
13
+ </div>
14
+ );
15
+ };
16
+
7
17
  export const NavigationBreadcrumbItem = ({
8
18
  children,
9
19
  icon,
@@ -36,23 +46,9 @@ export const Navigation = ({ actions, breadcrumbs }: NavigationProps) => {
36
46
  // Rendering
37
47
  return (
38
48
  <div className="navigation">
39
- <div className="breadcrumb">
40
- {breadcrumbs.map((breadcrumb, index) => (
41
- <div key={index} className="breadcrumb-container">
42
- {breadcrumb}
43
-
44
- {index !== breadcrumbs.length - 1 && (
45
- <div className="breadcrumb-chevron">
46
- <Icon name="chevron-right" />
47
- </div>
48
- )}
49
- </div>
50
- ))}
51
- </div>
49
+ <div className="breadcrumb">{breadcrumbs}</div>
52
50
  <div className="navigation-divider" />
53
- <div className="navigation-actions">
54
- {actions?.map((action, index) => cloneElement(action, { key: index, ...action.props }))}
55
- </div>
51
+ <div className="navigation-actions">{actions}</div>
56
52
  </div>
57
53
  );
58
54
  };
package/src/layouts/Navigation/Navigation.types.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ReactElement } from 'react';
2
2
 
3
- export type NavigationProps = { actions?: ReactElement[]; breadcrumbs: ReactElement[] };
3
+ export type NavigationProps = { actions?: ReactElement; breadcrumbs: ReactElement };
4
4
  export type NavigationBreadcrumbItemProps = { icon?: string; highlight?: boolean; onClick?: () => void };
package/src/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Navigation, NavigationBreadcrumbItem } from '../Navigation';
3
+ import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
4
4
  import { Button } from '../../../components/Button/Button';
5
5
  import { icons } from '../../../components/Icon/icons';
6
6
 
@@ -16,21 +16,27 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
16
16
  <Story
17
17
  name="Overview"
18
18
  args={{
19
- actions: [
20
- <Button icon="check" onClick={() => {}}>
21
- Action 1
22
- </Button>,
23
- <Button icon="add" onClick={() => {}}>
24
- Action 2
25
- </Button>,
26
- ],
27
- breadcrumbs: [
19
+ actions: (
20
+ <>
21
+ <Button icon="check" onClick={() => {}}>
22
+ Action 1
23
+ </Button>
24
+ <Button icon="add" onClick={() => {}}>
25
+ Action 2
26
+ </Button>
27
+ </>
28
+ ),
29
+ breadcrumbs: (
30
+ <>
28
31
  <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
29
32
  Home
30
- </NavigationBreadcrumbItem>,
31
- <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
33
+ </NavigationBreadcrumbItem>
34
+ <NavigationBreadcrumbDivider />
35
+ <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
36
+ <NavigationBreadcrumbDivider />
32
37
  <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
33
- ]
38
+ </>
39
+ )
34
40
  }}
35
41
 
36
42
  >