@dktunited-techoff/techoff-suite-ui 0.9.1 → 0.9.3
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/package.json +1 -1
- package/src/components/Select/Select.types.ts +2 -2
- package/src/layouts/Header/Header.tsx +4 -1
- package/src/layouts/Header/Header.types.ts +5 -2
- package/src/layouts/Navigation/Navigation.tsx +4 -2
- package/src/layouts/Navigation/Navigation.types.ts +2 -2
- package/src/layouts/Navigation/__stories__/Navigation.stories.mdx +1 -1
- package/esm/assets/fonts/Montserrat-Medium.ttf +0 -0
- package/esm/assets/fonts/Roboto-Light.ttf +0 -0
- package/esm/components/Button/Button.css +0 -93
- package/esm/components/Button/Button.d.ts +0 -5
- package/esm/components/Button/Button.js +0 -17
- package/esm/components/Button/Button.js.map +0 -1
- package/esm/components/Button/Button.types.d.ts +0 -9
- package/esm/components/Button/Button.types.js +0 -2
- package/esm/components/Button/Button.types.js.map +0 -1
- package/esm/components/Button/__stories__/Button.stories.mdx +0 -74
- package/esm/components/Checkbox/Checkbox.css +0 -72
- package/esm/components/Checkbox/Checkbox.d.ts +0 -4
- package/esm/components/Checkbox/Checkbox.js +0 -18
- package/esm/components/Checkbox/Checkbox.js.map +0 -1
- package/esm/components/Checkbox/Checkbox.types.d.ts +0 -7
- package/esm/components/Checkbox/Checkbox.types.js +0 -2
- package/esm/components/Checkbox/Checkbox.types.js.map +0 -1
- package/esm/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -56
- package/esm/components/Icon/Icon.css +0 -26
- package/esm/components/Icon/Icon.d.ts +0 -4
- package/esm/components/Icon/Icon.js +0 -12
- package/esm/components/Icon/Icon.js.map +0 -1
- package/esm/components/Icon/Icon.types.d.ts +0 -4
- package/esm/components/Icon/Icon.types.js +0 -2
- package/esm/components/Icon/Icon.types.js.map +0 -1
- package/esm/components/Icon/__stories__/Icon.stories.mdx +0 -89
- package/esm/components/Icon/icons/add-circle.svg +0 -1
- package/esm/components/Icon/icons/add.svg +0 -1
- package/esm/components/Icon/icons/alert-circle-filled.svg +0 -1
- package/esm/components/Icon/icons/alert-circle.svg +0 -1
- package/esm/components/Icon/icons/alert-triangle-filled.svg +0 -1
- package/esm/components/Icon/icons/alert-triangle.svg +0 -1
- package/esm/components/Icon/icons/arrow-diagonal-collapse.svg +0 -1
- package/esm/components/Icon/icons/arrow-diagonal-expand.svg +0 -1
- package/esm/components/Icon/icons/arrow-down.svg +0 -1
- package/esm/components/Icon/icons/arrow-go-back.svg +0 -1
- package/esm/components/Icon/icons/arrow-left-right.svg +0 -1
- package/esm/components/Icon/icons/arrow-left.svg +0 -1
- package/esm/components/Icon/icons/arrow-right.svg +0 -1
- package/esm/components/Icon/icons/arrow-up-down.svg +0 -1
- package/esm/components/Icon/icons/arrow-up.svg +0 -1
- package/esm/components/Icon/icons/check-circle-filled.svg +0 -1
- package/esm/components/Icon/icons/check-circle.svg +0 -1
- package/esm/components/Icon/icons/check-square-filled.svg +0 -1
- package/esm/components/Icon/icons/check-square.svg +0 -1
- package/esm/components/Icon/icons/check.svg +0 -1
- package/esm/components/Icon/icons/chevron-down.svg +0 -1
- package/esm/components/Icon/icons/chevron-left.svg +0 -1
- package/esm/components/Icon/icons/chevron-right.svg +0 -1
- package/esm/components/Icon/icons/chevron-up.svg +0 -1
- package/esm/components/Icon/icons/circle.svg +0 -1
- package/esm/components/Icon/icons/close-circle.svg +0 -1
- package/esm/components/Icon/icons/close.svg +0 -1
- package/esm/components/Icon/icons/currency-euro.svg +0 -1
- package/esm/components/Icon/icons/download.svg +0 -1
- package/esm/components/Icon/icons/edit.svg +0 -1
- package/esm/components/Icon/icons/external-link.svg +0 -1
- package/esm/components/Icon/icons/filter-off.svg +0 -1
- package/esm/components/Icon/icons/filter.svg +0 -1
- package/esm/components/Icon/icons/flashlight-off.svg +0 -1
- package/esm/components/Icon/icons/flashlight.svg +0 -1
- package/esm/components/Icon/icons/header-bikestudio.svg +0 -32
- package/esm/components/Icon/icons/header-nsc-helmet.svg +0 -32
- package/esm/components/Icon/icons/header-opticost.svg +0 -32
- package/esm/components/Icon/icons/header-repairability.svg +0 -32
- package/esm/components/Icon/icons/heart-filled.svg +0 -1
- package/esm/components/Icon/icons/heart.svg +0 -1
- package/esm/components/Icon/icons/home.svg +0 -1
- package/esm/components/Icon/icons/index.d.ts +0 -3
- package/esm/components/Icon/icons/index.js +0 -53
- package/esm/components/Icon/icons/index.js.map +0 -1
- package/esm/components/Icon/icons/index.ts +0 -52
- package/esm/components/Icon/icons/link.svg +0 -1
- package/esm/components/Icon/icons/list-settings.svg +0 -1
- package/esm/components/Icon/icons/lock.svg +0 -1
- package/esm/components/Icon/icons/save.svg +0 -1
- package/esm/components/Icon/icons/search.svg +0 -1
- package/esm/components/Icon/icons/square.svg +0 -1
- package/esm/components/Icon/icons/tools.svg +0 -1
- package/esm/components/Icon/icons/user.svg +0 -1
- package/esm/components/Inputs/BooleanInput/BooleanInput.css +0 -58
- package/esm/components/Inputs/BooleanInput/BooleanInput.d.ts +0 -4
- package/esm/components/Inputs/BooleanInput/BooleanInput.js +0 -13
- package/esm/components/Inputs/BooleanInput/BooleanInput.js.map +0 -1
- package/esm/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
- package/esm/components/Inputs/BooleanInput/BooleanInput.types.d.ts +0 -8
- package/esm/components/Inputs/BooleanInput/BooleanInput.types.js +0 -2
- package/esm/components/Inputs/BooleanInput/BooleanInput.types.js.map +0 -1
- package/esm/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -8
- package/esm/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -53
- package/esm/components/Inputs/TextInput/TextInput.css +0 -58
- package/esm/components/Inputs/TextInput/TextInput.d.ts +0 -4
- package/esm/components/Inputs/TextInput/TextInput.js +0 -17
- package/esm/components/Inputs/TextInput/TextInput.js.map +0 -1
- package/esm/components/Inputs/TextInput/TextInput.tsx +0 -46
- package/esm/components/Inputs/TextInput/TextInput.types.d.ts +0 -12
- package/esm/components/Inputs/TextInput/TextInput.types.js +0 -2
- package/esm/components/Inputs/TextInput/TextInput.types.js.map +0 -1
- package/esm/components/Inputs/TextInput/TextInput.types.ts +0 -12
- package/esm/components/Inputs/TextInput/__stories__/TextInput.stories.mdx +0 -76
- package/esm/components/Loader/Loader.css +0 -42
- package/esm/components/Loader/Loader.d.ts +0 -4
- package/esm/components/Loader/Loader.js +0 -6
- package/esm/components/Loader/Loader.js.map +0 -1
- package/esm/components/Loader/Loader.types.d.ts +0 -3
- package/esm/components/Loader/Loader.types.js +0 -2
- package/esm/components/Loader/Loader.types.js.map +0 -1
- package/esm/components/Loader/__stories__/Loader.stories.mdx +0 -30
- package/esm/components/Select/Select.css +0 -30
- package/esm/components/Select/Select.d.ts +0 -4
- package/esm/components/Select/Select.js +0 -16
- package/esm/components/Select/Select.js.map +0 -1
- package/esm/components/Select/Select.types.d.ts +0 -6
- package/esm/components/Select/Select.types.js +0 -2
- package/esm/components/Select/Select.types.js.map +0 -1
- package/esm/components/Select/__stories__/Select.stories.mdx +0 -40
- package/esm/hooks/use-click-outside.d.ts +0 -2
- package/esm/hooks/use-click-outside.js +0 -14
- package/esm/hooks/use-click-outside.js.map +0 -1
- package/esm/index.d.ts +0 -9
- package/esm/index.js +0 -10
- package/esm/index.js.map +0 -1
- package/esm/layouts/Header/Header.css +0 -125
- package/esm/layouts/Header/Header.d.ts +0 -4
- package/esm/layouts/Header/Header.js +0 -13
- package/esm/layouts/Header/Header.js.map +0 -1
- package/esm/layouts/Header/Header.types.d.ts +0 -10
- package/esm/layouts/Header/Header.types.js +0 -2
- package/esm/layouts/Header/Header.types.js.map +0 -1
- package/esm/layouts/Header/HeaderProfile.d.ts +0 -3
- package/esm/layouts/Header/HeaderProfile.js +0 -35
- package/esm/layouts/Header/HeaderProfile.js.map +0 -1
- package/esm/layouts/Header/__stories__/Header.stories.mdx +0 -41
- package/esm/layouts/Navigation/Navigation.css +0 -74
- package/esm/layouts/Navigation/Navigation.d.ts +0 -6
- package/esm/layouts/Navigation/Navigation.js +0 -26
- package/esm/layouts/Navigation/Navigation.js.map +0 -1
- package/esm/layouts/Navigation/Navigation.types.d.ts +0 -10
- package/esm/layouts/Navigation/Navigation.types.js +0 -2
- package/esm/layouts/Navigation/Navigation.types.js.map +0 -1
- package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -45
- package/esm/utils/string.utils.d.ts +0 -1
- package/esm/utils/string.utils.js +0 -2
- package/esm/utils/string.utils.js.map +0 -1
- package/esm/utils/validator.utils.d.ts +0 -2
- package/esm/utils/validator.utils.js +0 -5
- package/esm/utils/validator.utils.js.map +0 -1
- package/lib/assets/fonts/Montserrat-Medium.ttf +0 -0
- package/lib/assets/fonts/Roboto-Light.ttf +0 -0
- package/lib/components/Button/Button.css +0 -93
- package/lib/components/Button/Button.d.ts +0 -5
- package/lib/components/Button/Button.js +0 -21
- package/lib/components/Button/Button.js.map +0 -1
- package/lib/components/Button/Button.types.d.ts +0 -9
- package/lib/components/Button/Button.types.js +0 -3
- package/lib/components/Button/Button.types.js.map +0 -1
- package/lib/components/Button/__stories__/Button.stories.mdx +0 -74
- package/lib/components/Checkbox/Checkbox.css +0 -72
- package/lib/components/Checkbox/Checkbox.d.ts +0 -4
- package/lib/components/Checkbox/Checkbox.js +0 -22
- package/lib/components/Checkbox/Checkbox.js.map +0 -1
- package/lib/components/Checkbox/Checkbox.types.d.ts +0 -7
- package/lib/components/Checkbox/Checkbox.types.js +0 -3
- package/lib/components/Checkbox/Checkbox.types.js.map +0 -1
- package/lib/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -56
- package/lib/components/Icon/Icon.css +0 -26
- package/lib/components/Icon/Icon.d.ts +0 -4
- package/lib/components/Icon/Icon.js +0 -16
- package/lib/components/Icon/Icon.js.map +0 -1
- package/lib/components/Icon/Icon.types.d.ts +0 -4
- package/lib/components/Icon/Icon.types.js +0 -3
- package/lib/components/Icon/Icon.types.js.map +0 -1
- package/lib/components/Icon/__stories__/Icon.stories.mdx +0 -89
- package/lib/components/Icon/icons/add-circle.svg +0 -1
- package/lib/components/Icon/icons/add.svg +0 -1
- package/lib/components/Icon/icons/alert-circle-filled.svg +0 -1
- package/lib/components/Icon/icons/alert-circle.svg +0 -1
- package/lib/components/Icon/icons/alert-triangle-filled.svg +0 -1
- package/lib/components/Icon/icons/alert-triangle.svg +0 -1
- package/lib/components/Icon/icons/arrow-diagonal-collapse.svg +0 -1
- package/lib/components/Icon/icons/arrow-diagonal-expand.svg +0 -1
- package/lib/components/Icon/icons/arrow-down.svg +0 -1
- package/lib/components/Icon/icons/arrow-go-back.svg +0 -1
- package/lib/components/Icon/icons/arrow-left-right.svg +0 -1
- package/lib/components/Icon/icons/arrow-left.svg +0 -1
- package/lib/components/Icon/icons/arrow-right.svg +0 -1
- package/lib/components/Icon/icons/arrow-up-down.svg +0 -1
- package/lib/components/Icon/icons/arrow-up.svg +0 -1
- package/lib/components/Icon/icons/check-circle-filled.svg +0 -1
- package/lib/components/Icon/icons/check-circle.svg +0 -1
- package/lib/components/Icon/icons/check-square-filled.svg +0 -1
- package/lib/components/Icon/icons/check-square.svg +0 -1
- package/lib/components/Icon/icons/check.svg +0 -1
- package/lib/components/Icon/icons/chevron-down.svg +0 -1
- package/lib/components/Icon/icons/chevron-left.svg +0 -1
- package/lib/components/Icon/icons/chevron-right.svg +0 -1
- package/lib/components/Icon/icons/chevron-up.svg +0 -1
- package/lib/components/Icon/icons/circle.svg +0 -1
- package/lib/components/Icon/icons/close-circle.svg +0 -1
- package/lib/components/Icon/icons/close.svg +0 -1
- package/lib/components/Icon/icons/currency-euro.svg +0 -1
- package/lib/components/Icon/icons/download.svg +0 -1
- package/lib/components/Icon/icons/edit.svg +0 -1
- package/lib/components/Icon/icons/external-link.svg +0 -1
- package/lib/components/Icon/icons/filter-off.svg +0 -1
- package/lib/components/Icon/icons/filter.svg +0 -1
- package/lib/components/Icon/icons/flashlight-off.svg +0 -1
- package/lib/components/Icon/icons/flashlight.svg +0 -1
- package/lib/components/Icon/icons/header-bikestudio.svg +0 -32
- package/lib/components/Icon/icons/header-nsc-helmet.svg +0 -32
- package/lib/components/Icon/icons/header-opticost.svg +0 -32
- package/lib/components/Icon/icons/header-repairability.svg +0 -32
- package/lib/components/Icon/icons/heart-filled.svg +0 -1
- package/lib/components/Icon/icons/heart.svg +0 -1
- package/lib/components/Icon/icons/home.svg +0 -1
- package/lib/components/Icon/icons/index.d.ts +0 -3
- package/lib/components/Icon/icons/index.js +0 -56
- package/lib/components/Icon/icons/index.js.map +0 -1
- package/lib/components/Icon/icons/index.ts +0 -52
- package/lib/components/Icon/icons/link.svg +0 -1
- package/lib/components/Icon/icons/list-settings.svg +0 -1
- package/lib/components/Icon/icons/lock.svg +0 -1
- package/lib/components/Icon/icons/save.svg +0 -1
- package/lib/components/Icon/icons/search.svg +0 -1
- package/lib/components/Icon/icons/square.svg +0 -1
- package/lib/components/Icon/icons/tools.svg +0 -1
- package/lib/components/Icon/icons/user.svg +0 -1
- package/lib/components/Inputs/BooleanInput/BooleanInput.css +0 -58
- package/lib/components/Inputs/BooleanInput/BooleanInput.d.ts +0 -4
- package/lib/components/Inputs/BooleanInput/BooleanInput.js +0 -17
- package/lib/components/Inputs/BooleanInput/BooleanInput.js.map +0 -1
- package/lib/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
- package/lib/components/Inputs/BooleanInput/BooleanInput.types.d.ts +0 -8
- package/lib/components/Inputs/BooleanInput/BooleanInput.types.js +0 -3
- package/lib/components/Inputs/BooleanInput/BooleanInput.types.js.map +0 -1
- package/lib/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -8
- package/lib/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -53
- package/lib/components/Inputs/TextInput/TextInput.css +0 -58
- package/lib/components/Inputs/TextInput/TextInput.d.ts +0 -4
- package/lib/components/Inputs/TextInput/TextInput.js +0 -21
- package/lib/components/Inputs/TextInput/TextInput.js.map +0 -1
- package/lib/components/Inputs/TextInput/TextInput.tsx +0 -46
- package/lib/components/Inputs/TextInput/TextInput.types.d.ts +0 -12
- package/lib/components/Inputs/TextInput/TextInput.types.js +0 -3
- package/lib/components/Inputs/TextInput/TextInput.types.js.map +0 -1
- package/lib/components/Inputs/TextInput/TextInput.types.ts +0 -12
- package/lib/components/Inputs/TextInput/__stories__/TextInput.stories.mdx +0 -76
- package/lib/components/Loader/Loader.css +0 -42
- package/lib/components/Loader/Loader.d.ts +0 -4
- package/lib/components/Loader/Loader.js +0 -10
- package/lib/components/Loader/Loader.js.map +0 -1
- package/lib/components/Loader/Loader.types.d.ts +0 -3
- package/lib/components/Loader/Loader.types.js +0 -3
- package/lib/components/Loader/Loader.types.js.map +0 -1
- package/lib/components/Loader/__stories__/Loader.stories.mdx +0 -30
- package/lib/components/Select/Select.css +0 -30
- package/lib/components/Select/Select.d.ts +0 -4
- package/lib/components/Select/Select.js +0 -20
- package/lib/components/Select/Select.js.map +0 -1
- package/lib/components/Select/Select.types.d.ts +0 -6
- package/lib/components/Select/Select.types.js +0 -3
- package/lib/components/Select/Select.types.js.map +0 -1
- package/lib/components/Select/__stories__/Select.stories.mdx +0 -40
- package/lib/hooks/use-click-outside.d.ts +0 -2
- package/lib/hooks/use-click-outside.js +0 -18
- package/lib/hooks/use-click-outside.js.map +0 -1
- package/lib/index.d.ts +0 -9
- package/lib/index.js +0 -26
- package/lib/index.js.map +0 -1
- package/lib/layouts/Header/Header.css +0 -125
- package/lib/layouts/Header/Header.d.ts +0 -4
- package/lib/layouts/Header/Header.js +0 -17
- package/lib/layouts/Header/Header.js.map +0 -1
- package/lib/layouts/Header/Header.types.d.ts +0 -10
- package/lib/layouts/Header/Header.types.js +0 -3
- package/lib/layouts/Header/Header.types.js.map +0 -1
- package/lib/layouts/Header/HeaderProfile.d.ts +0 -3
- package/lib/layouts/Header/HeaderProfile.js +0 -39
- package/lib/layouts/Header/HeaderProfile.js.map +0 -1
- package/lib/layouts/Header/__stories__/Header.stories.mdx +0 -41
- package/lib/layouts/Navigation/Navigation.css +0 -74
- package/lib/layouts/Navigation/Navigation.d.ts +0 -6
- package/lib/layouts/Navigation/Navigation.js +0 -31
- package/lib/layouts/Navigation/Navigation.js.map +0 -1
- package/lib/layouts/Navigation/Navigation.types.d.ts +0 -10
- package/lib/layouts/Navigation/Navigation.types.js +0 -3
- package/lib/layouts/Navigation/Navigation.types.js.map +0 -1
- package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -45
- package/lib/utils/string.utils.d.ts +0 -1
- package/lib/utils/string.utils.js +0 -6
- package/lib/utils/string.utils.js.map +0 -1
- package/lib/utils/validator.utils.d.ts +0 -2
- package/lib/utils/validator.utils.js +0 -9
- package/lib/utils/validator.utils.js.map +0 -1
- package/src/utils/validator.utils.ts +0 -8
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useEffect, useRef } from 'react';
|
|
2
|
-
export const useClickOutside = (callback) => {
|
|
3
|
-
const ref = useRef(null);
|
|
4
|
-
const handleClickOutside = (event) => {
|
|
5
|
-
if (ref.current && !ref.current.contains(event.target))
|
|
6
|
-
callback();
|
|
7
|
-
};
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
document.addEventListener('click', handleClickOutside);
|
|
10
|
-
return () => document.removeEventListener('click', handleClickOutside);
|
|
11
|
-
}, []);
|
|
12
|
-
return ref;
|
|
13
|
-
};
|
|
14
|
-
//# sourceMappingURL=use-click-outside.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAAE,QAAQ,EAAE,CAAC;IAC7E,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IACzE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}
|
package/esm/index.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export * from './components/Button/Button';
|
|
2
|
-
export * from './components/Checkbox/Checkbox';
|
|
3
|
-
export * from './components/Icon/Icon';
|
|
4
|
-
export * from './components/Inputs/BooleanInput/BooleanInput';
|
|
5
|
-
export * from './components/Inputs/TextInput/TextInput';
|
|
6
|
-
export * from './components/Loader/Loader';
|
|
7
|
-
export * from './layouts/Header/Header';
|
|
8
|
-
export * from './layouts/Header/HeaderProfile';
|
|
9
|
-
export * from './layouts/Navigation/Navigation';
|
package/esm/index.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export * from './components/Button/Button';
|
|
2
|
-
export * from './components/Checkbox/Checkbox';
|
|
3
|
-
export * from './components/Icon/Icon';
|
|
4
|
-
export * from './components/Inputs/BooleanInput/BooleanInput';
|
|
5
|
-
export * from './components/Inputs/TextInput/TextInput';
|
|
6
|
-
export * from './components/Loader/Loader';
|
|
7
|
-
export * from './layouts/Header/Header';
|
|
8
|
-
export * from './layouts/Header/HeaderProfile';
|
|
9
|
-
export * from './layouts/Navigation/Navigation';
|
|
10
|
-
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC"}
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
@font-face {
|
|
2
|
-
font-family: 'Montserrat-Medium';
|
|
3
|
-
src: url('../../assets/fonts/Montserrat-Medium.ttf');
|
|
4
|
-
}
|
|
5
|
-
@font-face {
|
|
6
|
-
font-family: 'Roboto-Light';
|
|
7
|
-
src: url('../../assets/fonts/Roboto-Light.ttf');
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
/* ######## */
|
|
11
|
-
/* HEADER */
|
|
12
|
-
header {
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
justify-content: space-between;
|
|
16
|
-
width: 100%;
|
|
17
|
-
height: 64px;
|
|
18
|
-
padding: 0 24px;
|
|
19
|
-
}
|
|
20
|
-
.header-left-side {
|
|
21
|
-
display: flex;
|
|
22
|
-
flex: 1;
|
|
23
|
-
align-items: center;
|
|
24
|
-
height: 100%;
|
|
25
|
-
}
|
|
26
|
-
.header-actions {
|
|
27
|
-
display: flex;
|
|
28
|
-
}
|
|
29
|
-
.header-actions > * {
|
|
30
|
-
margin-left: 12px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/* ################ */
|
|
34
|
-
/* HEADER TECHOFF */
|
|
35
|
-
.header-techoff {
|
|
36
|
-
display: flex;
|
|
37
|
-
height: 18px;
|
|
38
|
-
margin-left: 4px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
/* ################ */
|
|
42
|
-
/* HEADER PROFILE */
|
|
43
|
-
.header-profile-container {
|
|
44
|
-
position: relative;
|
|
45
|
-
}
|
|
46
|
-
.header-profile-dropdown {
|
|
47
|
-
display: flex;
|
|
48
|
-
height: 40px;
|
|
49
|
-
border-radius: 9999px;
|
|
50
|
-
box-shadow: 0px 12px 12px 0px #00537d1a;
|
|
51
|
-
color: #4e5d6b;
|
|
52
|
-
background-color: #ffffff;
|
|
53
|
-
cursor: pointer;
|
|
54
|
-
}
|
|
55
|
-
.header-profile-img-container {
|
|
56
|
-
width: 40px;
|
|
57
|
-
height: 40px;
|
|
58
|
-
padding: 4px;
|
|
59
|
-
border-radius: 9999px;
|
|
60
|
-
}
|
|
61
|
-
.header-profile-img-icon {
|
|
62
|
-
display: flex;
|
|
63
|
-
align-items: center;
|
|
64
|
-
justify-content: center;
|
|
65
|
-
width: 32px;
|
|
66
|
-
height: 32px;
|
|
67
|
-
border-radius: 9999px;
|
|
68
|
-
background-color: rgb(229, 229, 229);
|
|
69
|
-
}
|
|
70
|
-
.header-profile-name {
|
|
71
|
-
display: flex;
|
|
72
|
-
flex: 1;
|
|
73
|
-
align-items: center;
|
|
74
|
-
padding-left: 4px;
|
|
75
|
-
}
|
|
76
|
-
.header-profile-chevron {
|
|
77
|
-
display: flex;
|
|
78
|
-
align-items: center;
|
|
79
|
-
justify-content: center;
|
|
80
|
-
width: 40px;
|
|
81
|
-
height: 40px;
|
|
82
|
-
border-radius: 9999px;
|
|
83
|
-
}
|
|
84
|
-
.header-profile-menu {
|
|
85
|
-
position: absolute;
|
|
86
|
-
right: 0;
|
|
87
|
-
top: 48px;
|
|
88
|
-
width: 288px;
|
|
89
|
-
padding: 4px;
|
|
90
|
-
border-radius: 8px;
|
|
91
|
-
box-shadow: 0px 12px 12px 0px #00537d1a;
|
|
92
|
-
background-color: #ffffff;
|
|
93
|
-
z-index: 10;
|
|
94
|
-
}
|
|
95
|
-
.header-profile-menu-item {
|
|
96
|
-
display: flex;
|
|
97
|
-
align-items: center;
|
|
98
|
-
height: 40px;
|
|
99
|
-
border-radius: 6px;
|
|
100
|
-
cursor: pointer;
|
|
101
|
-
}
|
|
102
|
-
.header-profile-menu-item:hover {
|
|
103
|
-
background-color: #e7f3f9;
|
|
104
|
-
}
|
|
105
|
-
.header-profile-menu-item-icon {
|
|
106
|
-
display: flex;
|
|
107
|
-
align-items: center;
|
|
108
|
-
justify-content: center;
|
|
109
|
-
width: 40px;
|
|
110
|
-
height: 40px;
|
|
111
|
-
}
|
|
112
|
-
.header-profile-menu-item-label {
|
|
113
|
-
flex: 1;
|
|
114
|
-
padding: 0 2px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
/* ######### */
|
|
118
|
-
/* GLOBALS */
|
|
119
|
-
* {
|
|
120
|
-
font-size: 14px;
|
|
121
|
-
outline: none;
|
|
122
|
-
box-sizing: border-box;
|
|
123
|
-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
|
124
|
-
'Helvetica Neue', sans-serif;
|
|
125
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { icons } from '../../components/Icon/icons';
|
|
3
|
-
import './Header.css';
|
|
4
|
-
export const Header = ({ actions, appName }) => {
|
|
5
|
-
// #########
|
|
6
|
-
// Rendering
|
|
7
|
-
return (React.createElement("header", null,
|
|
8
|
-
React.createElement("div", { className: "header-left-side" },
|
|
9
|
-
React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons[`header-${appName}`] } })),
|
|
10
|
-
React.createElement("div", null,
|
|
11
|
-
React.createElement("div", { className: "header-actions" }, actions))));
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=Header.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
export type HeaderProps = {
|
|
3
|
-
actions: ReactNode[];
|
|
4
|
-
appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
|
|
5
|
-
};
|
|
6
|
-
export type HeaderProfileProps = {
|
|
7
|
-
firstname: string;
|
|
8
|
-
lastname: string;
|
|
9
|
-
supportLink?: string;
|
|
10
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Header.types.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.types.ts"],"names":[],"mappings":""}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Icon } from '../../components/Icon/Icon';
|
|
4
|
-
import { useClickOutside } from '../../hooks/use-click-outside';
|
|
5
|
-
import { capitalize } from '../../utils/string.utils';
|
|
6
|
-
export const HeaderProfile = ({ firstname, lastname, supportLink }) => {
|
|
7
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
8
|
-
const ref = useClickOutside(() => setIsOpen(false));
|
|
9
|
-
// ########
|
|
10
|
-
// Handlers
|
|
11
|
-
const handleToggleOpen = () => setIsOpen(prev => !prev);
|
|
12
|
-
const handleOpenSupport = () => window.open(supportLink, '_blank', 'noreferrer');
|
|
13
|
-
// #########
|
|
14
|
-
// Rendering
|
|
15
|
-
return (React.createElement("div", { className: "header-profile-container", ref: ref },
|
|
16
|
-
React.createElement("div", { className: "header-profile-dropdown", onClick: handleToggleOpen },
|
|
17
|
-
React.createElement("div", { className: "header-profile-img-container" },
|
|
18
|
-
React.createElement("div", { className: "header-profile-img-icon" },
|
|
19
|
-
React.createElement(Icon, { name: "user", size: "16" }))),
|
|
20
|
-
React.createElement("div", { className: "header-profile-name" },
|
|
21
|
-
capitalize(firstname),
|
|
22
|
-
" ",
|
|
23
|
-
lastname.charAt(0).toUpperCase(),
|
|
24
|
-
"."),
|
|
25
|
-
React.createElement("div", { className: "header-profile-chevron" },
|
|
26
|
-
React.createElement(Icon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "16" }))),
|
|
27
|
-
isOpen && (React.createElement("div", { className: "header-profile-menu" },
|
|
28
|
-
React.createElement("div", { className: "header-profile-menu-item", onClick: handleOpenSupport },
|
|
29
|
-
React.createElement("div", { className: "header-profile-menu-item-icon" },
|
|
30
|
-
React.createElement(Icon, { name: "alert-triangle", size: "16" })),
|
|
31
|
-
React.createElement("div", { className: "header-profile-menu-item-label" }, "Contact support"),
|
|
32
|
-
React.createElement("div", { className: "header-profile-menu-item-icon" },
|
|
33
|
-
React.createElement(Icon, { name: "external-link", size: "16" })))))));
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=HeaderProfile.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderProfile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAsB,EAAE,EAAE;IACxF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpD,WAAW;IACX,WAAW;IACX,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEjF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B,EAAC,GAAG,EAAE,GAAG;QAChD,6BAAK,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,gBAAgB;YAChE,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,6BAAK,SAAS,EAAC,yBAAyB;oBACtC,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC1B,CACF;YACN,6BAAK,SAAS,EAAC,qBAAqB;gBACjC,UAAU,CAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEN,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5D,CACF;QAEL,MAAM,IAAI,CACT,6BAAK,SAAS,EAAC,qBAAqB;YAClC,6BAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,iBAAiB;gBAClE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;gBACN,6BAAK,SAAS,EAAC,gCAAgC,sBAAsB;gBACrE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,CACF,CACF,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
|
|
3
|
-
import { Header } from '../Header';
|
|
4
|
-
import { HeaderProfile } from '../HeaderProfile';
|
|
5
|
-
import { Button } from '../../../components/Button/Button';
|
|
6
|
-
|
|
7
|
-
<Meta title="Layouts/Header" />
|
|
8
|
-
|
|
9
|
-
export const headerArgTypes = {
|
|
10
|
-
appName: {
|
|
11
|
-
control: 'select',
|
|
12
|
-
options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
|
|
13
|
-
description: 'Icon of the button.',
|
|
14
|
-
},
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
# Header
|
|
18
|
-
|
|
19
|
-
The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
|
|
20
|
-
|
|
21
|
-
## Overview
|
|
22
|
-
|
|
23
|
-
<Canvas>
|
|
24
|
-
<Story
|
|
25
|
-
name="Overview"
|
|
26
|
-
args={{
|
|
27
|
-
actions: [
|
|
28
|
-
<Button icon="add" size="lg" variant="shadow" rounded />,
|
|
29
|
-
<HeaderProfile firstname="John" lastname="Doe" />,
|
|
30
|
-
],
|
|
31
|
-
appName: 'repairability',
|
|
32
|
-
}}
|
|
33
|
-
argTypes={headerArgTypes}
|
|
34
|
-
>
|
|
35
|
-
{args => <Header {...args} />}
|
|
36
|
-
</Story>
|
|
37
|
-
</Canvas>
|
|
38
|
-
|
|
39
|
-
## Props
|
|
40
|
-
|
|
41
|
-
<ArgsTable story="Overview" of={Header} />
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
.navigation {
|
|
2
|
-
display: flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
height: 32px;
|
|
5
|
-
padding: 0 24px;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
/* ############ */
|
|
9
|
-
/* BREADCRUMB */
|
|
10
|
-
.breadcrumb {
|
|
11
|
-
display: flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
padding-right: 20px;
|
|
14
|
-
}
|
|
15
|
-
.breadcrumb-container {
|
|
16
|
-
display: flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
}
|
|
19
|
-
.breadcrumb-chevron {
|
|
20
|
-
padding: 0 8px;
|
|
21
|
-
color: #00689d;
|
|
22
|
-
}
|
|
23
|
-
.breadcrumb-item {
|
|
24
|
-
display: flex;
|
|
25
|
-
align-items: center;
|
|
26
|
-
height: 32px;
|
|
27
|
-
border-radius: 9999px;
|
|
28
|
-
color: #00689d;
|
|
29
|
-
}
|
|
30
|
-
.breadcrumb-item--highlight {
|
|
31
|
-
padding: 0 20px;
|
|
32
|
-
box-shadow: 0px 6px 6px 0px #00537d1a;
|
|
33
|
-
background: linear-gradient(270.22deg, #007dbc 43.94%, #7ebee0 114.83%);
|
|
34
|
-
color: #ffffff;
|
|
35
|
-
}
|
|
36
|
-
.breadcrumb-item--link {
|
|
37
|
-
cursor: pointer;
|
|
38
|
-
}
|
|
39
|
-
.breadcrumb-item--link:hover {
|
|
40
|
-
text-decoration: underline;
|
|
41
|
-
}
|
|
42
|
-
.breadcrumb-item--icon {
|
|
43
|
-
padding-right: 8px;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/* ######### */
|
|
47
|
-
/* DIVIDER */
|
|
48
|
-
.navigation-divider {
|
|
49
|
-
flex: 1;
|
|
50
|
-
height: 1px;
|
|
51
|
-
margin: 4px 0;
|
|
52
|
-
background: #bedeef;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/* ######### */
|
|
56
|
-
/* ACTIONS */
|
|
57
|
-
.navigation-actions {
|
|
58
|
-
/* flex items-center [&>*]:ml-4 */
|
|
59
|
-
display: flex;
|
|
60
|
-
align-items: center;
|
|
61
|
-
}
|
|
62
|
-
.navigation-actions > * {
|
|
63
|
-
margin-left: 16px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* ######### */
|
|
67
|
-
/* GLOBALS */
|
|
68
|
-
* {
|
|
69
|
-
font-size: 14px;
|
|
70
|
-
outline: none;
|
|
71
|
-
box-sizing: border-box;
|
|
72
|
-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
|
73
|
-
'Helvetica Neue', sans-serif;
|
|
74
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { PropsWithChildren } from 'react';
|
|
3
|
-
import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
|
|
4
|
-
import './Navigation.css';
|
|
5
|
-
export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
|
|
6
|
-
export declare const Navigation: ({ actions, breadcrumbs }: NavigationProps) => React.JSX.Element;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Icon } from '../../components/Icon/Icon';
|
|
3
|
-
import './Navigation.css';
|
|
4
|
-
export const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
|
|
5
|
-
// #########
|
|
6
|
-
// Rendering
|
|
7
|
-
return (React.createElement("div", { className: `
|
|
8
|
-
breadcrumb-item
|
|
9
|
-
${highlight ? 'breadcrumb-item--highlight' : ''} ${onClick ? 'breadcrumb-item--link' : ''}
|
|
10
|
-
`, onClick: onClick },
|
|
11
|
-
icon && (React.createElement("div", { className: "breadcrumb-item--icon" },
|
|
12
|
-
React.createElement(Icon, { name: icon, size: "16" }))),
|
|
13
|
-
children));
|
|
14
|
-
};
|
|
15
|
-
export const Navigation = ({ actions, breadcrumbs }) => {
|
|
16
|
-
// #########
|
|
17
|
-
// Rendering
|
|
18
|
-
return (React.createElement("div", { className: "navigation" },
|
|
19
|
-
React.createElement("div", { className: "breadcrumb" }, breadcrumbs.map((breadcrumb, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
|
|
20
|
-
breadcrumb,
|
|
21
|
-
index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
|
|
22
|
-
React.createElement(Icon, { name: "chevron-right" }))))))),
|
|
23
|
-
React.createElement("div", { className: "navigation-divider" }),
|
|
24
|
-
React.createElement("div", { className: "navigation-actions" }, actions)));
|
|
25
|
-
};
|
|
26
|
-
//# sourceMappingURL=Navigation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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,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,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.types.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.types.ts"],"names":[],"mappings":""}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
|
|
3
|
-
import { Navigation, NavigationBreadcrumbItem } from '../Navigation';
|
|
4
|
-
import { Button } from '../../../components/Button/Button';
|
|
5
|
-
import { icons } from '../../../components/Icon/icons';
|
|
6
|
-
|
|
7
|
-
<Meta title="Layouts/Navigation" />
|
|
8
|
-
|
|
9
|
-
# Navigation
|
|
10
|
-
|
|
11
|
-
Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
|
|
12
|
-
|
|
13
|
-
## Overview
|
|
14
|
-
|
|
15
|
-
<Canvas>
|
|
16
|
-
<Story
|
|
17
|
-
name="Overview"
|
|
18
|
-
args={{
|
|
19
|
-
actions: [
|
|
20
|
-
<Button icon="check" onClick={() => {}}>
|
|
21
|
-
Action 1
|
|
22
|
-
</Button>,
|
|
23
|
-
<Button icon="plus" onClick={() => {}}>
|
|
24
|
-
Action 2
|
|
25
|
-
</Button>,
|
|
26
|
-
],
|
|
27
|
-
breadcrumbs: [
|
|
28
|
-
<NavigationBreadcrumbItem icon="home" onClick={() => {}}>
|
|
29
|
-
Home
|
|
30
|
-
</NavigationBreadcrumbItem>,
|
|
31
|
-
<NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
|
|
32
|
-
<NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
|
|
33
|
-
]
|
|
34
|
-
}}
|
|
35
|
-
|
|
36
|
-
>
|
|
37
|
-
|
|
38
|
-
{args => <Navigation {...args} />}
|
|
39
|
-
|
|
40
|
-
</Story>
|
|
41
|
-
</Canvas>
|
|
42
|
-
|
|
43
|
-
## Props
|
|
44
|
-
|
|
45
|
-
<ArgsTable story="Overview" of={Navigation} />
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const capitalize: (str: string) => string;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"validator.utils.js","sourceRoot":"","sources":["../../src/utils/validator.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+D,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpG,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,OAAqH,EACrH,IAAY,EACZ,EAAE;IACF,OAAO,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;AACrG,CAAC,CAAC"}
|
|
Binary file
|
|
Binary file
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
.button {
|
|
2
|
-
display: flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
justify-content: center;
|
|
5
|
-
border: none;
|
|
6
|
-
border-radius: 6px;
|
|
7
|
-
font-size: 14px;
|
|
8
|
-
line-height: 16px;
|
|
9
|
-
font-weight: 500;
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
transition: all ease 0.3s;
|
|
12
|
-
}
|
|
13
|
-
.button > div {
|
|
14
|
-
margin-right: 8px;
|
|
15
|
-
}
|
|
16
|
-
.button > div:last-child {
|
|
17
|
-
margin-right: 0px;
|
|
18
|
-
}
|
|
19
|
-
/* ####### */
|
|
20
|
-
/* BLOCK */
|
|
21
|
-
.button--block {
|
|
22
|
-
width: 100%;
|
|
23
|
-
}
|
|
24
|
-
/* ####### */
|
|
25
|
-
/* SIZES */
|
|
26
|
-
.button--md {
|
|
27
|
-
height: 32px;
|
|
28
|
-
padding: 0 14px;
|
|
29
|
-
}
|
|
30
|
-
.button--md.button--icon-only {
|
|
31
|
-
width: 32px;
|
|
32
|
-
padding: 0;
|
|
33
|
-
}
|
|
34
|
-
.button--lg {
|
|
35
|
-
height: 40px;
|
|
36
|
-
padding: 0 16px;
|
|
37
|
-
}
|
|
38
|
-
.button--lg.button--icon-only {
|
|
39
|
-
width: 40px;
|
|
40
|
-
padding: 0;
|
|
41
|
-
}
|
|
42
|
-
/* ########## */
|
|
43
|
-
/* VARIANTS */
|
|
44
|
-
.button--primary {
|
|
45
|
-
background: #007dbc;
|
|
46
|
-
color: #ffffff;
|
|
47
|
-
}
|
|
48
|
-
.button--primary:hover {
|
|
49
|
-
background: #00689d;
|
|
50
|
-
}
|
|
51
|
-
.button--secondary {
|
|
52
|
-
background: #e7f3f9;
|
|
53
|
-
color: #007dbc;
|
|
54
|
-
}
|
|
55
|
-
.button--secondary:hover {
|
|
56
|
-
background: #bedeef;
|
|
57
|
-
}
|
|
58
|
-
.button--success {
|
|
59
|
-
background: #02be8a;
|
|
60
|
-
color: #ffffff;
|
|
61
|
-
}
|
|
62
|
-
.button--success:hover {
|
|
63
|
-
background: #029e73;
|
|
64
|
-
color: #ffffff;
|
|
65
|
-
}
|
|
66
|
-
.button--ghost {
|
|
67
|
-
background: #ffffff;
|
|
68
|
-
color: #1d1d1b;
|
|
69
|
-
font-weight: 400;
|
|
70
|
-
}
|
|
71
|
-
.button--ghost:hover {
|
|
72
|
-
background: #e7f3f9;
|
|
73
|
-
}
|
|
74
|
-
.button--shadow {
|
|
75
|
-
box-shadow: 0px 12px 12px 0px #00537d1a;
|
|
76
|
-
background: #ffffff;
|
|
77
|
-
color: #4e5d6b;
|
|
78
|
-
}
|
|
79
|
-
/* ######### */
|
|
80
|
-
/* ROUNDED */
|
|
81
|
-
.button--rounded {
|
|
82
|
-
border-radius: 9999px;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/* ######### */
|
|
86
|
-
/* GLOBALS */
|
|
87
|
-
* {
|
|
88
|
-
font-size: 14px;
|
|
89
|
-
outline: none;
|
|
90
|
-
box-sizing: border-box;
|
|
91
|
-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
|
92
|
-
'Helvetica Neue', sans-serif;
|
|
93
|
-
}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { PropsWithChildren } from 'react';
|
|
3
|
-
import { ButtonProps } from './Button.types';
|
|
4
|
-
import './Button.css';
|
|
5
|
-
export declare const Button: ({ children, icon, iconDirection, size, variant, block, rounded, onClick, }: PropsWithChildren<ButtonProps>) => React.JSX.Element;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Button = void 0;
|
|
4
|
-
const React = require("react");
|
|
5
|
-
const Icon_1 = require("../Icon/Icon");
|
|
6
|
-
require("./Button.css");
|
|
7
|
-
const Button = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, onClick, }) => {
|
|
8
|
-
// #########
|
|
9
|
-
// Rendering
|
|
10
|
-
return (React.createElement("button", { className: `
|
|
11
|
-
button button--${size} button--${variant}
|
|
12
|
-
${block ? 'button--block' : ''}
|
|
13
|
-
${rounded ? 'button--rounded' : ''}
|
|
14
|
-
${icon && !children ? 'button--icon-only' : ''}
|
|
15
|
-
`, onClick: onClick },
|
|
16
|
-
icon && iconDirection === 'left' && React.createElement(Icon_1.Icon, { name: icon, size: "16" }),
|
|
17
|
-
children && React.createElement("div", null, children),
|
|
18
|
-
icon && iconDirection === 'right' && React.createElement(Icon_1.Icon, { name: icon, size: "16" })));
|
|
19
|
-
};
|
|
20
|
-
exports.Button = Button;
|
|
21
|
-
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,uCAAoC;AAEpC,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GACwB,EAAE,EAAE;IACnC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;yBACQ,IAAI,YAAY,OAAO;UACtC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;UAC5B,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UAChC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;OAC/C,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QAClE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,MAAM,UA2BjB"}
|