@carrier-dpx/air-react-library 0.7.25 → 0.7.27
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/Icon/icons/demo/AccountCircleIcon.figma.tsx +33 -0
- package/src/components/Icon/icons/demo/AccountCircleIcon.tsx +20 -0
- package/src/components/Icon/icons/demo/ChevronLeftIcon.figma.tsx +33 -0
- package/src/components/Icon/icons/demo/ChevronLeftIcon.tsx +19 -0
- package/src/components/Icon/icons/demo/NotificationsIcon.figma.tsx +33 -0
- package/src/components/Icon/icons/demo/NotificationsIcon.tsx +20 -0
- package/src/components/Icon/icons/demo/acount_circle_outlined.svg +4 -0
- package/src/components/Icon/icons/demo/chevron_left_outlined.svg +3 -0
- package/src/components/Icon/icons/demo/iconRegistry.tsx +35 -0
- package/src/components/Icon/icons/demo/index.ts +9 -0
- package/src/components/Icon/icons/demo/notifications_outlined.svg +4 -0
- package/src/components/MobileStatusBar/MobileStatusBar.example.tsx +143 -0
- package/src/components/MobileStatusBar/MobileStatusBar.tsx +45 -31
- package/src/index.ts +6 -0
package/package.json
CHANGED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Figma Code Connect Configuration for AccountCircleIcon
|
|
3
|
+
*
|
|
4
|
+
* Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=56-325
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import figma from "@figma/code-connect";
|
|
8
|
+
import Icon from "../../Icon";
|
|
9
|
+
import { AccountCircleIcon } from "./AccountCircleIcon";
|
|
10
|
+
|
|
11
|
+
figma.connect(
|
|
12
|
+
AccountCircleIcon,
|
|
13
|
+
"https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=56-325",
|
|
14
|
+
{
|
|
15
|
+
props: {
|
|
16
|
+
/**
|
|
17
|
+
* STYLE/VARIANT MAPPING
|
|
18
|
+
* Maps Figma's "Style" property to React's "variant" prop
|
|
19
|
+
* Figma: Style="Outlined" → React: variant="outlined"
|
|
20
|
+
* Figma: Style="Filled" → React: variant="filled"
|
|
21
|
+
*/
|
|
22
|
+
variant: figma.enum("Style", {
|
|
23
|
+
Outlined: "outlined",
|
|
24
|
+
Filled: "filled",
|
|
25
|
+
}),
|
|
26
|
+
},
|
|
27
|
+
example: ({ variant }) => (
|
|
28
|
+
<Icon fontSize="medium">
|
|
29
|
+
<AccountCircleIcon variant={variant} />
|
|
30
|
+
</Icon>
|
|
31
|
+
),
|
|
32
|
+
}
|
|
33
|
+
);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { FC, SVGProps } from "react";
|
|
2
|
+
|
|
3
|
+
export interface AccountCircleIconProps extends SVGProps<SVGSVGElement> {
|
|
4
|
+
variant?: "outlined" | "filled";
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const AccountCircleIcon: FC<AccountCircleIconProps> = ({ variant = "outlined", style, ...props }) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg
|
|
10
|
+
viewBox="0 0 24 24"
|
|
11
|
+
fill="none"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
style={{ width: "1em", height: "1em", display: "block", ...style }}
|
|
14
|
+
{...props}
|
|
15
|
+
>
|
|
16
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="currentColor"/>
|
|
17
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor"/>
|
|
18
|
+
</svg>
|
|
19
|
+
);
|
|
20
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Figma Code Connect Configuration for ChevronLeftIcon
|
|
3
|
+
*
|
|
4
|
+
* Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=12-149
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import figma from "@figma/code-connect";
|
|
8
|
+
import Icon from "../../Icon";
|
|
9
|
+
import { ChevronLeftIcon } from "./ChevronLeftIcon";
|
|
10
|
+
|
|
11
|
+
figma.connect(
|
|
12
|
+
ChevronLeftIcon,
|
|
13
|
+
"https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=12-149",
|
|
14
|
+
{
|
|
15
|
+
props: {
|
|
16
|
+
/**
|
|
17
|
+
* STYLE/VARIANT MAPPING
|
|
18
|
+
* Maps Figma's "Style" property to React's "variant" prop
|
|
19
|
+
* Figma: Style="Outlined" → React: variant="outlined"
|
|
20
|
+
* Figma: Style="Filled" → React: variant="filled"
|
|
21
|
+
*/
|
|
22
|
+
variant: figma.enum("Style", {
|
|
23
|
+
Outlined: "outlined",
|
|
24
|
+
Filled: "filled",
|
|
25
|
+
}),
|
|
26
|
+
},
|
|
27
|
+
example: ({ variant }) => (
|
|
28
|
+
<Icon fontSize="medium">
|
|
29
|
+
<ChevronLeftIcon variant={variant} />
|
|
30
|
+
</Icon>
|
|
31
|
+
),
|
|
32
|
+
}
|
|
33
|
+
);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { FC, SVGProps } from "react";
|
|
2
|
+
|
|
3
|
+
export interface ChevronLeftIconProps extends SVGProps<SVGSVGElement> {
|
|
4
|
+
variant?: "outlined" | "filled";
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const ChevronLeftIcon: FC<ChevronLeftIconProps> = ({ variant = "outlined", style, ...props }) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg
|
|
10
|
+
viewBox="0 0 24 24"
|
|
11
|
+
fill="none"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
style={{ width: "1em", height: "1em", display: "block", ...style }}
|
|
14
|
+
{...props}
|
|
15
|
+
>
|
|
16
|
+
<path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="currentColor"/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Figma Code Connect Configuration for NotificationsIcon
|
|
3
|
+
*
|
|
4
|
+
* Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=47-218
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import figma from "@figma/code-connect";
|
|
8
|
+
import Icon from "../../Icon";
|
|
9
|
+
import { NotificationsIcon } from "./NotificationsIcon";
|
|
10
|
+
|
|
11
|
+
figma.connect(
|
|
12
|
+
NotificationsIcon,
|
|
13
|
+
"https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=47-218",
|
|
14
|
+
{
|
|
15
|
+
props: {
|
|
16
|
+
/**
|
|
17
|
+
* STYLE/VARIANT MAPPING
|
|
18
|
+
* Maps Figma's "Style" property to React's "variant" prop
|
|
19
|
+
* Figma: Style="Outlined" → React: variant="outlined"
|
|
20
|
+
* Figma: Style="Filled" → React: variant="filled"
|
|
21
|
+
*/
|
|
22
|
+
variant: figma.enum("Style", {
|
|
23
|
+
Outlined: "outlined",
|
|
24
|
+
Filled: "filled",
|
|
25
|
+
}),
|
|
26
|
+
},
|
|
27
|
+
example: ({ variant }) => (
|
|
28
|
+
<Icon fontSize="medium">
|
|
29
|
+
<NotificationsIcon variant={variant} />
|
|
30
|
+
</Icon>
|
|
31
|
+
),
|
|
32
|
+
}
|
|
33
|
+
);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { FC, SVGProps } from "react";
|
|
2
|
+
|
|
3
|
+
export interface NotificationsIconProps extends SVGProps<SVGSVGElement> {
|
|
4
|
+
variant?: "outlined" | "filled";
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const NotificationsIcon: FC<NotificationsIconProps> = ({ variant = "outlined", style, ...props }) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg
|
|
10
|
+
viewBox="0 0 24 24"
|
|
11
|
+
fill="none"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
style={{ width: "1em", height: "1em", display: "block", ...style }}
|
|
14
|
+
{...props}
|
|
15
|
+
>
|
|
16
|
+
<path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="currentColor"/>
|
|
17
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="currentColor"/>
|
|
18
|
+
</svg>
|
|
19
|
+
);
|
|
20
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="black"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="black"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="black"/>
|
|
3
|
+
</svg>
|
|
@@ -61,6 +61,26 @@ const MoreVerticalSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props })
|
|
|
61
61
|
</svg>
|
|
62
62
|
);
|
|
63
63
|
|
|
64
|
+
const NotificationsSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
|
|
65
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
|
|
66
|
+
<path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="currentColor"/>
|
|
67
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="currentColor"/>
|
|
68
|
+
</svg>
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
const AccountCircleSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
|
|
72
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
|
|
73
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="currentColor"/>
|
|
74
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor"/>
|
|
75
|
+
</svg>
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
const ChevronLeftSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
|
|
79
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
|
|
80
|
+
<path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="currentColor"/>
|
|
81
|
+
</svg>
|
|
82
|
+
);
|
|
83
|
+
|
|
64
84
|
// WarningTriangle SVG (previously WarningIcon)
|
|
65
85
|
|
|
66
86
|
export interface IconInfo {
|
|
@@ -100,6 +120,21 @@ export const iconRegistry: Record<string, IconInfo> = {
|
|
|
100
120
|
component: MoreVerticalSvg,
|
|
101
121
|
variant: "outlined",
|
|
102
122
|
},
|
|
123
|
+
notifications: {
|
|
124
|
+
name: "notifications",
|
|
125
|
+
component: NotificationsSvg,
|
|
126
|
+
variant: "outlined",
|
|
127
|
+
},
|
|
128
|
+
accountcircle: {
|
|
129
|
+
name: "accountcircle",
|
|
130
|
+
component: AccountCircleSvg,
|
|
131
|
+
variant: "outlined",
|
|
132
|
+
},
|
|
133
|
+
chevronleft: {
|
|
134
|
+
name: "chevronleft",
|
|
135
|
+
component: ChevronLeftSvg,
|
|
136
|
+
variant: "outlined",
|
|
137
|
+
},
|
|
103
138
|
};
|
|
104
139
|
|
|
105
140
|
/**
|
|
@@ -24,3 +24,12 @@ export type { MenuIconProps } from "./MenuIcon";
|
|
|
24
24
|
|
|
25
25
|
export { MoreVerticalIcon } from "./MoreVerticalIcon";
|
|
26
26
|
export type { MoreVerticalIconProps } from "./MoreVerticalIcon";
|
|
27
|
+
|
|
28
|
+
export { NotificationsIcon } from "./NotificationsIcon";
|
|
29
|
+
export type { NotificationsIconProps } from "./NotificationsIcon";
|
|
30
|
+
|
|
31
|
+
export { AccountCircleIcon } from "./AccountCircleIcon";
|
|
32
|
+
export type { AccountCircleIconProps } from "./AccountCircleIcon";
|
|
33
|
+
|
|
34
|
+
export { ChevronLeftIcon } from "./ChevronLeftIcon";
|
|
35
|
+
export type { ChevronLeftIconProps } from "./ChevronLeftIcon";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="black"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="black"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MobileStatusBar Usage Examples
|
|
3
|
+
*
|
|
4
|
+
* This file demonstrates how to use the MobileStatusBar component
|
|
5
|
+
* in different scenarios.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React from "react";
|
|
9
|
+
import { FleetThemeProvider } from "../theme";
|
|
10
|
+
import MobileStatusBar from "./MobileStatusBar";
|
|
11
|
+
import AppBar from "../AppBar";
|
|
12
|
+
import Toolbar from "../Toolbar";
|
|
13
|
+
import Box from "../Box";
|
|
14
|
+
import Typography from "../Typography";
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Example 1: Basic fixed status bar at top of viewport
|
|
18
|
+
* This is the default behavior - fixed position at the top
|
|
19
|
+
*/
|
|
20
|
+
export function BasicFixedStatusBar() {
|
|
21
|
+
return (
|
|
22
|
+
<FleetThemeProvider>
|
|
23
|
+
<MobileStatusBar time="9:41" />
|
|
24
|
+
{/* Add padding-top to body content to account for fixed status bar */}
|
|
25
|
+
<Box sx={{ pt: "59px" }}>
|
|
26
|
+
<Typography>Content below status bar</Typography>
|
|
27
|
+
</Box>
|
|
28
|
+
</FleetThemeProvider>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Example 2: Fixed status bar with AppBar below it
|
|
34
|
+
* AppBar needs top offset to account for the 59px status bar
|
|
35
|
+
*/
|
|
36
|
+
export function StatusBarWithAppBar() {
|
|
37
|
+
return (
|
|
38
|
+
<FleetThemeProvider>
|
|
39
|
+
<MobileStatusBar time="9:41" position="fixed" />
|
|
40
|
+
<AppBar
|
|
41
|
+
position="fixed"
|
|
42
|
+
sx={{ top: "59px" }} // Offset by status bar height
|
|
43
|
+
>
|
|
44
|
+
<Toolbar>
|
|
45
|
+
<Typography variant="h6">My App</Typography>
|
|
46
|
+
</Toolbar>
|
|
47
|
+
</AppBar>
|
|
48
|
+
{/* Add padding-top for both status bar and AppBar */}
|
|
49
|
+
<Box sx={{ pt: "123px" }}> {/* 59px status bar + 64px AppBar */}
|
|
50
|
+
<Typography>Content below both status bar and AppBar</Typography>
|
|
51
|
+
</Box>
|
|
52
|
+
</FleetThemeProvider>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* Example 3: Relative position (inline in layout)
|
|
58
|
+
* Useful when the status bar is part of a larger mobile shell component
|
|
59
|
+
*/
|
|
60
|
+
export function RelativeStatusBar() {
|
|
61
|
+
return (
|
|
62
|
+
<FleetThemeProvider>
|
|
63
|
+
<Box sx={{ border: "1px solid #ccc", borderRadius: 1, overflow: "hidden" }}>
|
|
64
|
+
<MobileStatusBar time="10:24" position="relative" />
|
|
65
|
+
<Box sx={{ p: 2 }}>
|
|
66
|
+
<Typography>Content inside mobile shell</Typography>
|
|
67
|
+
</Box>
|
|
68
|
+
</Box>
|
|
69
|
+
</FleetThemeProvider>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* Example 4: Custom time display
|
|
75
|
+
* You can pass any time string to customize the display
|
|
76
|
+
*/
|
|
77
|
+
export function CustomTimeStatusBar() {
|
|
78
|
+
const [currentTime, setCurrentTime] = React.useState("9:41");
|
|
79
|
+
|
|
80
|
+
React.useEffect(() => {
|
|
81
|
+
const interval = setInterval(() => {
|
|
82
|
+
const now = new Date();
|
|
83
|
+
const hours = now.getHours();
|
|
84
|
+
const minutes = now.getMinutes().toString().padStart(2, "0");
|
|
85
|
+
setCurrentTime(`${hours}:${minutes}`);
|
|
86
|
+
}, 1000);
|
|
87
|
+
|
|
88
|
+
return () => clearInterval(interval);
|
|
89
|
+
}, []);
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<FleetThemeProvider>
|
|
93
|
+
<MobileStatusBar time={currentTime} />
|
|
94
|
+
<Box sx={{ pt: "59px" }}>
|
|
95
|
+
<Typography>Live updating time: {currentTime}</Typography>
|
|
96
|
+
</Box>
|
|
97
|
+
</FleetThemeProvider>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* Example 5: Full mobile shell layout
|
|
103
|
+
* Complete mobile interface with status bar, AppBar, and content
|
|
104
|
+
*/
|
|
105
|
+
export function FullMobileShell() {
|
|
106
|
+
return (
|
|
107
|
+
<FleetThemeProvider>
|
|
108
|
+
{/* Fixed status bar at top */}
|
|
109
|
+
<MobileStatusBar time="9:41" position="fixed" />
|
|
110
|
+
|
|
111
|
+
{/* Fixed AppBar below status bar */}
|
|
112
|
+
<AppBar
|
|
113
|
+
position="fixed"
|
|
114
|
+
sx={{ top: "59px" }}
|
|
115
|
+
color="paper"
|
|
116
|
+
divider
|
|
117
|
+
>
|
|
118
|
+
<Toolbar>
|
|
119
|
+
<Typography variant="h6" sx={{ flexGrow: 1 }}>
|
|
120
|
+
My Mobile App
|
|
121
|
+
</Typography>
|
|
122
|
+
</Toolbar>
|
|
123
|
+
</AppBar>
|
|
124
|
+
|
|
125
|
+
{/* Main content area */}
|
|
126
|
+
<Box
|
|
127
|
+
sx={{
|
|
128
|
+
pt: "123px", // Status bar (59px) + AppBar (64px)
|
|
129
|
+
minHeight: "100vh",
|
|
130
|
+
p: 2
|
|
131
|
+
}}
|
|
132
|
+
>
|
|
133
|
+
<Typography variant="h5" sx={{ mb: 2 }}>
|
|
134
|
+
Welcome
|
|
135
|
+
</Typography>
|
|
136
|
+
<Typography>
|
|
137
|
+
This is the main content area. The status bar and AppBar are fixed
|
|
138
|
+
at the top, and this content scrolls below them.
|
|
139
|
+
</Typography>
|
|
140
|
+
</Box>
|
|
141
|
+
</FleetThemeProvider>
|
|
142
|
+
);
|
|
143
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { forwardRef } from "react";
|
|
1
|
+
import { forwardRef, SVGProps } from "react";
|
|
2
2
|
import { useTheme } from "@mui/material/styles";
|
|
3
3
|
import Box from "../Box";
|
|
4
4
|
import Typography from "../Typography";
|
|
@@ -8,17 +8,19 @@ const DYNAMIC_ISLAND_WIDTH = 125;
|
|
|
8
8
|
const DYNAMIC_ISLAND_HEIGHT = 37;
|
|
9
9
|
|
|
10
10
|
/** Inline iOS-style signal bars icon; fill uses currentColor. */
|
|
11
|
-
function IosSignalIcon({ sx, ...rest }: { sx?: object
|
|
11
|
+
function IosSignalIcon({ sx, ...rest }: { sx?: object } & SVGProps<SVGSVGElement>) {
|
|
12
12
|
return (
|
|
13
13
|
<Box
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
{...({
|
|
15
|
+
component: "svg",
|
|
16
|
+
width: 18,
|
|
17
|
+
height: 12,
|
|
18
|
+
viewBox: "0 0 18 12",
|
|
19
|
+
fill: "none",
|
|
20
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
21
|
+
sx: { flexShrink: 0, ...sx },
|
|
22
|
+
...rest,
|
|
23
|
+
} as any)}
|
|
22
24
|
>
|
|
23
25
|
<path d="M10 3C10 2.44772 10.4477 2 11 2H12C12.5523 2 13 2.44772 13 3V11C13 11.5523 12.5523 12 12 12H11C10.4477 12 10 11.5523 10 11V3Z" fill="currentColor" />
|
|
24
26
|
<path d="M15 1C15 0.447715 15.4477 0 16 0H17C17.5523 0 18 0.447715 18 1V11C18 11.5523 17.5523 12 17 12H16C15.4477 12 15 11.5523 15 11V1Z" fill="currentColor" />
|
|
@@ -29,17 +31,19 @@ function IosSignalIcon({ sx, ...rest }: { sx?: object; [k: string]: unknown }) {
|
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
/** Inline iOS-style wifi icon; fill uses currentColor. */
|
|
32
|
-
function IosWifiIcon({ sx, ...rest }: { sx?: object
|
|
34
|
+
function IosWifiIcon({ sx, ...rest }: { sx?: object } & SVGProps<SVGSVGElement>) {
|
|
33
35
|
return (
|
|
34
36
|
<Box
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
{...({
|
|
38
|
+
component: "svg",
|
|
39
|
+
width: 17,
|
|
40
|
+
height: 12,
|
|
41
|
+
viewBox: "0 0 17 12",
|
|
42
|
+
fill: "none",
|
|
43
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
44
|
+
sx: { flexShrink: 0, ...sx },
|
|
45
|
+
...rest,
|
|
46
|
+
} as any)}
|
|
43
47
|
>
|
|
44
48
|
<path d="M6.11524 8.91875C7.53496 7.69319 9.61439 7.69332 11.0342 8.91875C11.1056 8.98468 11.1475 9.07827 11.1494 9.17656C11.1514 9.2748 11.1136 9.36943 11.0449 9.43828L8.82129 11.7283C8.75619 11.7956 8.66781 11.8337 8.5752 11.8338C8.48249 11.8338 8.3933 11.7956 8.32813 11.7283L6.1045 9.43828C6.03589 9.3694 5.998 9.27476 6 9.17656C6.00204 9.07827 6.04375 8.98463 6.11524 8.91875Z" fill="currentColor" />
|
|
45
49
|
<path d="M3.10938 6.17851C6.16846 3.27392 10.9058 3.27392 13.9648 6.17851C14.0339 6.24662 14.0732 6.34029 14.0742 6.43828C14.0751 6.53616 14.0373 6.63055 13.9697 6.7L12.6846 8.02519C12.5521 8.16047 12.338 8.16378 12.2022 8.03203C11.1977 7.1036 9.89123 6.58961 8.53614 6.58964C7.18182 6.59022 5.87597 7.10412 4.87208 8.03203C4.7362 8.16378 4.52209 8.16054 4.38965 8.02519L3.1045 6.7C3.03674 6.63064 2.99918 6.53621 3.00001 6.43828C3.00091 6.34031 3.04039 6.24661 3.10938 6.17851Z" fill="currentColor" />
|
|
@@ -49,17 +53,19 @@ function IosWifiIcon({ sx, ...rest }: { sx?: object; [k: string]: unknown }) {
|
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
/** Inline iOS-style battery icon; fill uses currentColor. */
|
|
52
|
-
function IosBatteryIcon({ sx, ...rest }: { sx?: object
|
|
56
|
+
function IosBatteryIcon({ sx, ...rest }: { sx?: object } & SVGProps<SVGSVGElement>) {
|
|
53
57
|
return (
|
|
54
58
|
<Box
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
{...({
|
|
60
|
+
component: "svg",
|
|
61
|
+
width: 28,
|
|
62
|
+
height: 13,
|
|
63
|
+
viewBox: "0 0 28 13",
|
|
64
|
+
fill: "none",
|
|
65
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
66
|
+
sx: { flexShrink: 0, ...sx },
|
|
67
|
+
...rest,
|
|
68
|
+
} as any)}
|
|
63
69
|
>
|
|
64
70
|
<path d="M15 2C16.1046 2 17 2.89543 17 4V9C17 10.1046 16.1046 11 15 11H4C2.89543 11 2 10.1046 2 9V4C2 2.89543 2.89543 2 4 2H15Z" fill="currentColor" />
|
|
65
71
|
<path fillRule="evenodd" clipRule="evenodd" d="M21 0C23.2091 4.62576e-07 25 1.79086 25 4V9C25 11.2091 23.2091 13 21 13H4C1.79086 13 1.2776e-07 11.2091 0 9V4C0 1.79086 1.79086 0 4 0H21ZM4 1C2.34315 1 1 2.34315 1 4V9C1 10.6569 2.34315 12 4 12H21C22.6569 12 24 10.6569 24 9V4C24 2.34315 22.6569 1 21 1H4Z" fill="currentColor" />
|
|
@@ -76,9 +82,14 @@ export interface MobileStatusBarProps {
|
|
|
76
82
|
time?: string;
|
|
77
83
|
/**
|
|
78
84
|
* Layout position. Use "fixed" for a sticky status bar; use "relative" or "static" when inside a layout.
|
|
79
|
-
* @default "
|
|
85
|
+
* @default "fixed"
|
|
80
86
|
*/
|
|
81
87
|
position?: "fixed" | "relative" | "static";
|
|
88
|
+
/**
|
|
89
|
+
* Whether to show background color (base.background.paper) or transparent.
|
|
90
|
+
* @default true
|
|
91
|
+
*/
|
|
92
|
+
background?: boolean;
|
|
82
93
|
/**
|
|
83
94
|
* Additional sx passed to the root container.
|
|
84
95
|
*/
|
|
@@ -96,7 +107,7 @@ export interface MobileStatusBarProps {
|
|
|
96
107
|
* import { MobileStatusBar } from '@carrier-dpx/air-react-library'
|
|
97
108
|
*/
|
|
98
109
|
const MobileStatusBar = forwardRef<HTMLDivElement, MobileStatusBarProps>(
|
|
99
|
-
({ time = "9:41", position = "fixed", sx, ...rest }, ref) => {
|
|
110
|
+
({ time = "9:41", position = "fixed", background = true, sx, ...rest }, ref) => {
|
|
100
111
|
const theme = useTheme();
|
|
101
112
|
const iconColor = theme.palette.common?.black ?? "#000000";
|
|
102
113
|
|
|
@@ -111,6 +122,9 @@ const MobileStatusBar = forwardRef<HTMLDivElement, MobileStatusBarProps>(
|
|
|
111
122
|
alignItems: "center",
|
|
112
123
|
justifyContent: "space-between",
|
|
113
124
|
px: 2,
|
|
125
|
+
backgroundColor: background
|
|
126
|
+
? theme.palette.base?.background.paper
|
|
127
|
+
: "transparent",
|
|
114
128
|
...sx,
|
|
115
129
|
}}
|
|
116
130
|
{...rest}
|
|
@@ -131,7 +145,7 @@ const MobileStatusBar = forwardRef<HTMLDivElement, MobileStatusBarProps>(
|
|
|
131
145
|
width: DYNAMIC_ISLAND_WIDTH,
|
|
132
146
|
height: DYNAMIC_ISLAND_HEIGHT,
|
|
133
147
|
backgroundColor: "#000",
|
|
134
|
-
borderRadius:
|
|
148
|
+
borderRadius: `${DYNAMIC_ISLAND_HEIGHT / 2}px`, // Pill shape: half of height (18.5px)
|
|
135
149
|
}}
|
|
136
150
|
/>
|
|
137
151
|
|
package/src/index.ts
CHANGED
|
@@ -42,6 +42,9 @@ export {
|
|
|
42
42
|
WarningTriangle,
|
|
43
43
|
MenuIcon,
|
|
44
44
|
MoreVerticalIcon,
|
|
45
|
+
NotificationsIcon,
|
|
46
|
+
AccountCircleIcon,
|
|
47
|
+
ChevronLeftIcon,
|
|
45
48
|
SvgIcon,
|
|
46
49
|
iconRegistry,
|
|
47
50
|
getIcon,
|
|
@@ -54,6 +57,9 @@ export type {
|
|
|
54
57
|
WarningTriangleProps,
|
|
55
58
|
MenuIconProps,
|
|
56
59
|
MoreVerticalIconProps,
|
|
60
|
+
NotificationsIconProps,
|
|
61
|
+
AccountCircleIconProps,
|
|
62
|
+
ChevronLeftIconProps,
|
|
57
63
|
SvgIconProps,
|
|
58
64
|
IconInfo,
|
|
59
65
|
} from "./components/Icon/icons/demo";
|