@telia/teddy 0.7.7 → 0.7.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/avatar/avatar-root.d.ts +1 -1
- package/dist/components/avatar/index.d.ts +1 -1
- package/dist/components/breadcrumbs/breadcrumbs-link.d.ts +1 -1
- package/dist/components/breadcrumbs/index.d.ts +1 -1
- package/dist/components/card/card-illustration.d.ts +1 -1
- package/dist/components/card/card-link.d.ts +1 -1
- package/dist/components/channel-button/channel-button-root.d.ts +3 -3
- package/dist/components/channel-button/index.d.ts +3 -3
- package/dist/components/chip/chip-indicator.d.ts +2 -2
- package/dist/components/chip/index.d.ts +2 -2
- package/dist/components/color-dot/index.d.ts +1 -1
- package/dist/components/dashboard-card/dashboard-card-avatar.d.ts +1 -1
- package/dist/components/expandable-card/expandable-card-button.d.ts +2 -2
- package/dist/components/expandable-card/index.d.ts +3 -3
- package/dist/components/flip-card/flip-card-trigger.d.ts +2 -2
- package/dist/components/footer/footer-bottom-row.cjs +12 -0
- package/dist/components/footer/footer-bottom-row.d.ts +7 -0
- package/dist/components/footer/footer-bottom-row.js +12 -0
- package/dist/components/footer/footer-column.cjs +12 -0
- package/dist/components/footer/footer-column.d.ts +12 -0
- package/dist/components/footer/footer-column.js +12 -0
- package/dist/components/footer/footer-links-list.cjs +15 -0
- package/dist/components/footer/footer-links-list.d.ts +4 -0
- package/dist/components/footer/footer-links-list.js +15 -0
- package/dist/components/footer/footer-list.cjs +12 -0
- package/dist/components/footer/footer-list.d.ts +7 -0
- package/dist/components/footer/footer-list.js +12 -0
- package/dist/components/footer/footer-root.cjs +29 -0
- package/dist/components/footer/footer-root.d.ts +5 -0
- package/dist/components/footer/footer-root.js +29 -0
- package/dist/components/footer/footer-top-row.cjs +12 -0
- package/dist/components/footer/footer-top-row.d.ts +8 -0
- package/dist/components/footer/footer-top-row.js +12 -0
- package/dist/components/footer/index.cjs +22 -0
- package/dist/components/footer/index.d.ts +24 -0
- package/dist/components/footer/index.js +22 -0
- package/dist/components/icon/utils.d.ts +1 -1
- package/dist/components/index.cjs +2 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +2 -0
- package/dist/components/metricmeter/metricmeter.cjs +24 -18
- package/dist/components/metricmeter/metricmeter.d.ts +3 -1
- package/dist/components/metricmeter/metricmeter.js +24 -18
- package/dist/components/modal/modal-close.cjs +1 -0
- package/dist/components/modal/modal-close.js +1 -0
- package/dist/components/navigation-menu/navigation-menu.cjs +1 -0
- package/dist/components/navigation-menu/navigation-menu.d.ts +1 -1
- package/dist/components/navigation-menu/navigation-menu.js +1 -0
- package/dist/components/notabene/notabene-icon.d.ts +2 -2
- package/dist/components/notification/index.d.ts +1 -1
- package/dist/components/notification/notification-icon.d.ts +2 -2
- package/dist/components/notification/notification-root.d.ts +1 -1
- package/dist/components/pagination/pagination-button.d.ts +1 -1
- package/dist/components/radio-card-group/radio-card-group-content.cjs +1 -0
- package/dist/components/radio-card-group/radio-card-group-content.js +1 -0
- package/dist/components/radio-card-group/radio-card-group-item-title.cjs +1 -0
- package/dist/components/radio-card-group/radio-card-group-item-title.js +1 -0
- package/dist/components/radio-card-group/radio-card-group-item.cjs +1 -0
- package/dist/components/radio-card-group/radio-card-group-item.js +1 -0
- package/dist/components/scroll-area/index.d.ts +3 -3
- package/dist/components/scroll-area/scroll-area-button.d.ts +2 -2
- package/dist/components/tabs/tabs-scroll-button.d.ts +2 -2
- package/dist/components/tabs/tabs-scroll.d.ts +1 -1
- package/dist/components/text-field/index.d.ts +2 -2
- package/dist/components/text-field/text-field-button.d.ts +2 -2
- package/dist/components/toggle/toggle.d.ts +2 -2
- package/dist/components/tooltip/index.d.ts +1 -1
- package/dist/main.cjs +2 -0
- package/dist/main.js +2 -0
- package/dist/style.css +112 -1
- package/dist/utils/generate-styling/grid.d.ts +24 -24
- package/dist/utils/generate-styling/index.d.ts +16 -16
- package/dist/utils/generate-styling/util.d.ts +2 -2
- package/package.json +2 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React__default from "react";
|
|
4
|
+
const styles = {
|
|
5
|
+
"teddy-footer": "_teddy-footer_p4fn7_1",
|
|
6
|
+
"teddy-footer__container": "_teddy-footer__container_p4fn7_12",
|
|
7
|
+
"teddy-footer__content": "_teddy-footer__content_p4fn7_38",
|
|
8
|
+
"teddy-footer__top-row": "_teddy-footer__top-row_p4fn7_51",
|
|
9
|
+
"teddy-footer__list": "_teddy-footer__list_p4fn7_64",
|
|
10
|
+
"teddy-footer__links-list": "_teddy-footer__links-list_p4fn7_77",
|
|
11
|
+
"teddy-footer__column": "_teddy-footer__column_p4fn7_90",
|
|
12
|
+
"teddy-footer__bottom-row": "_teddy-footer__bottom-row_p4fn7_95"
|
|
13
|
+
};
|
|
14
|
+
const rootClassName = "teddy-footer";
|
|
15
|
+
const Root = React__default.forwardRef(
|
|
16
|
+
({ className, children, ...props }, ref) => {
|
|
17
|
+
const rootClasses = clsx(
|
|
18
|
+
styles[`${rootClassName}`],
|
|
19
|
+
className
|
|
20
|
+
);
|
|
21
|
+
return /* @__PURE__ */ jsx("footer", { ref, className: rootClasses, ...props, children: /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__container`], children: /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__content`], children }) }) });
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
Root.displayName = "Root";
|
|
25
|
+
export {
|
|
26
|
+
Root,
|
|
27
|
+
rootClassName,
|
|
28
|
+
styles as s
|
|
29
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const clsx = require("clsx");
|
|
6
|
+
const components_footer_footerRoot = require("./footer-root.cjs");
|
|
7
|
+
const TopRow = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
8
|
+
const classes = clsx([components_footer_footerRoot.styles[`${components_footer_footerRoot.rootClassName}__top-row`]], className);
|
|
9
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, ...props, children });
|
|
10
|
+
});
|
|
11
|
+
TopRow.displayName = "TopRow";
|
|
12
|
+
exports.TopRow = TopRow;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
export type TopRowProps = React.HTMLAttributes<HTMLDivElement>;
|
|
4
|
+
/**
|
|
5
|
+
* Pure wrapper for the top area (logo, social icons, etc).
|
|
6
|
+
* Example: <Footer.TopRow><Footer.Link asChild>...logo...</Footer.Link> ...</Footer.TopRow>
|
|
7
|
+
*/
|
|
8
|
+
export declare const TopRow: React.ForwardRefExoticComponent<TopRowProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import React__default from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { s as styles, rootClassName } from "./footer-root.js";
|
|
5
|
+
const TopRow = React__default.forwardRef(({ className, children, ...props }, ref) => {
|
|
6
|
+
const classes = clsx([styles[`${rootClassName}__top-row`]], className);
|
|
7
|
+
return /* @__PURE__ */ jsx("div", { ref, className: classes, ...props, children });
|
|
8
|
+
});
|
|
9
|
+
TopRow.displayName = "TopRow";
|
|
10
|
+
export {
|
|
11
|
+
TopRow
|
|
12
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const components_footer_footerRoot = require("./footer-root.cjs");
|
|
4
|
+
const components_footer_footerTopRow = require("./footer-top-row.cjs");
|
|
5
|
+
const components_footer_footerColumn = require("./footer-column.cjs");
|
|
6
|
+
const components_footer_footerList = require("./footer-list.cjs");
|
|
7
|
+
const components_footer_footerBottomRow = require("./footer-bottom-row.cjs");
|
|
8
|
+
const components_footer_footerLinksList = require("./footer-links-list.cjs");
|
|
9
|
+
components_footer_footerRoot.Root.displayName = "Footer";
|
|
10
|
+
components_footer_footerTopRow.TopRow.displayName = "Footer.TopRow";
|
|
11
|
+
components_footer_footerColumn.Column.displayName = "Footer.Column";
|
|
12
|
+
components_footer_footerList.List.displayName = "Footer.List";
|
|
13
|
+
components_footer_footerBottomRow.BottomRow.displayName = "Footer.BottomRow";
|
|
14
|
+
components_footer_footerLinksList.LinksList.displayName = "Footer.LinksList";
|
|
15
|
+
const Footer = Object.assign(components_footer_footerRoot.Root, {
|
|
16
|
+
TopRow: components_footer_footerTopRow.TopRow,
|
|
17
|
+
Column: components_footer_footerColumn.Column,
|
|
18
|
+
List: components_footer_footerList.List,
|
|
19
|
+
BottomRow: components_footer_footerBottomRow.BottomRow,
|
|
20
|
+
LinksList: components_footer_footerLinksList.LinksList
|
|
21
|
+
});
|
|
22
|
+
exports.Footer = Footer;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { RootProps } from './footer-root';
|
|
2
|
+
import { TopRowProps } from './footer-top-row';
|
|
3
|
+
import { ColumnProps } from './footer-column';
|
|
4
|
+
import { ListProps } from './footer-list';
|
|
5
|
+
import { BottomRowProps } from './footer-bottom-row';
|
|
6
|
+
import { LinksListProps } from './footer-links-list';
|
|
7
|
+
|
|
8
|
+
declare const Footer: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLElement>> & {
|
|
9
|
+
TopRow: import('react').ForwardRefExoticComponent<TopRowProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
10
|
+
Column: import('react').ForwardRefExoticComponent<ColumnProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
11
|
+
List: import('react').ForwardRefExoticComponent<ListProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
12
|
+
BottomRow: import('react').ForwardRefExoticComponent<BottomRowProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
13
|
+
LinksList: import('react').ForwardRefExoticComponent<LinksListProps & import('react').RefAttributes<HTMLAnchorElement>>;
|
|
14
|
+
};
|
|
15
|
+
type FooterProps = {
|
|
16
|
+
Root: RootProps;
|
|
17
|
+
TopRow: TopRowProps;
|
|
18
|
+
Column: ColumnProps;
|
|
19
|
+
List: ListProps;
|
|
20
|
+
Content: BottomRowProps;
|
|
21
|
+
LinksList: LinksListProps;
|
|
22
|
+
};
|
|
23
|
+
export { Footer };
|
|
24
|
+
export type { FooterProps };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Root } from "./footer-root.js";
|
|
2
|
+
import { TopRow } from "./footer-top-row.js";
|
|
3
|
+
import { Column } from "./footer-column.js";
|
|
4
|
+
import { List } from "./footer-list.js";
|
|
5
|
+
import { BottomRow } from "./footer-bottom-row.js";
|
|
6
|
+
import { LinksList } from "./footer-links-list.js";
|
|
7
|
+
Root.displayName = "Footer";
|
|
8
|
+
TopRow.displayName = "Footer.TopRow";
|
|
9
|
+
Column.displayName = "Footer.Column";
|
|
10
|
+
List.displayName = "Footer.List";
|
|
11
|
+
BottomRow.displayName = "Footer.BottomRow";
|
|
12
|
+
LinksList.displayName = "Footer.LinksList";
|
|
13
|
+
const Footer = Object.assign(Root, {
|
|
14
|
+
TopRow,
|
|
15
|
+
Column,
|
|
16
|
+
List,
|
|
17
|
+
BottomRow,
|
|
18
|
+
LinksList
|
|
19
|
+
});
|
|
20
|
+
export {
|
|
21
|
+
Footer
|
|
22
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const isIconName: (value: string | null) => value is "
|
|
1
|
+
export declare const isIconName: (value: string | null) => value is "search" | "split" | "link" | "alert" | "menu" | "radio" | "email" | "key" | "add" | "reverse" | "infinite" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "map" | "summary" | "time" | "video" | "image" | "stop" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "download" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shortcut" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "sync" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-neutral" | "smiley-sad" | "smiley-very-happy" | "smiley-very-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "AI-star" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "smart-connect" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "youtube" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const components_footer_index = require("./footer/index.cjs");
|
|
3
4
|
const components_pagination_index = require("./pagination/index.cjs");
|
|
4
5
|
const components_select_index = require("./select/index.cjs");
|
|
5
6
|
const components_avatar_index = require("./avatar/index.cjs");
|
|
@@ -62,6 +63,7 @@ const components_slider_slider = require("./slider/slider.cjs");
|
|
|
62
63
|
const components_circleBar_circleBar = require("./circle-bar/circle-bar.cjs");
|
|
63
64
|
const sonner = require("sonner");
|
|
64
65
|
const components_input_inputGroup = require("./input/input-group.cjs");
|
|
66
|
+
exports.Footer = components_footer_index.Footer;
|
|
65
67
|
exports.Pagination = components_pagination_index.Pagination;
|
|
66
68
|
exports.Select = components_select_index.Select;
|
|
67
69
|
exports.Avatar = components_avatar_index.Avatar;
|
package/dist/components/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Footer } from "./footer/index.js";
|
|
1
2
|
import { Pagination } from "./pagination/index.js";
|
|
2
3
|
import { Select } from "./select/index.js";
|
|
3
4
|
import { Avatar } from "./avatar/index.js";
|
|
@@ -87,6 +88,7 @@ export {
|
|
|
87
88
|
FieldErrorText,
|
|
88
89
|
Flex,
|
|
89
90
|
FlipCard,
|
|
91
|
+
Footer,
|
|
90
92
|
G as GlobalNavigation,
|
|
91
93
|
Grid,
|
|
92
94
|
Heading,
|
|
@@ -12,9 +12,9 @@ const MetricMeter = ({
|
|
|
12
12
|
speedDelta = 10,
|
|
13
13
|
initial = 0,
|
|
14
14
|
speedUnitLabel = "Mbps",
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
isDecrementDisabled = false,
|
|
16
|
+
isIncrementDisabled = false,
|
|
17
|
+
onSelectedValue = (e) => console.log(e)
|
|
18
18
|
}) => {
|
|
19
19
|
const [speed, setSpeed] = React.useState(initial);
|
|
20
20
|
const increaseSpeed = () => {
|
|
@@ -47,22 +47,12 @@ const MetricMeter = ({
|
|
|
47
47
|
percentFilled = 0.01;
|
|
48
48
|
}
|
|
49
49
|
const offset = start - spread * percentFilled;
|
|
50
|
-
const incrementalDisabled = speed === maxSpeed;
|
|
51
|
-
const decrementDisabled = speed === minSpeed;
|
|
50
|
+
const incrementalDisabled = speed === maxSpeed || isIncrementDisabled;
|
|
51
|
+
const decrementDisabled = speed === minSpeed || isDecrementDisabled;
|
|
52
52
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("metricmeter"), children: [
|
|
53
53
|
title && /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
|
|
54
54
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: components_metricmeter_css.css("__svg-container"), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 400 400", className: components_metricmeter_css.css("__svg"), children: [
|
|
55
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
56
|
-
"circle",
|
|
57
|
-
{
|
|
58
|
-
cx: "200",
|
|
59
|
-
cy: "200",
|
|
60
|
-
r: radius,
|
|
61
|
-
strokeWidth: "32",
|
|
62
|
-
stroke: backgroundColor,
|
|
63
|
-
fill: "none"
|
|
64
|
-
}
|
|
65
|
-
),
|
|
55
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "32", stroke: backgroundColor, fill: "none" }),
|
|
66
56
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
67
57
|
"circle",
|
|
68
58
|
{
|
|
@@ -79,12 +69,28 @@ const MetricMeter = ({
|
|
|
79
69
|
)
|
|
80
70
|
] }) }),
|
|
81
71
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("__controls"), children: [
|
|
82
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
73
|
+
"button",
|
|
74
|
+
{
|
|
75
|
+
className: components_metricmeter_css.css("__button--decrease") + " " + components_metricmeter_css.css("__button") + (decrementDisabled ? " " + components_metricmeter_css.css("__button--disabled") : ""),
|
|
76
|
+
onClick: decreaseSpeed,
|
|
77
|
+
disabled: decrementDisabled,
|
|
78
|
+
children: "—"
|
|
79
|
+
}
|
|
80
|
+
),
|
|
83
81
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("__label-container"), children: [
|
|
84
82
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: components_metricmeter_css.css("__speed-label"), children: speed }),
|
|
85
83
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: components_metricmeter_css.css("__speed-unit-label"), children: speedUnitLabel })
|
|
86
84
|
] }),
|
|
87
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
85
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
"button",
|
|
87
|
+
{
|
|
88
|
+
className: components_metricmeter_css.css("__button") + (incrementalDisabled ? " " + components_metricmeter_css.css("__button--disabled") : ""),
|
|
89
|
+
onClick: increaseSpeed,
|
|
90
|
+
disabled: incrementalDisabled,
|
|
91
|
+
children: "+"
|
|
92
|
+
}
|
|
93
|
+
)
|
|
88
94
|
] })
|
|
89
95
|
] });
|
|
90
96
|
};
|
|
@@ -9,7 +9,9 @@ export interface MetricMeterProps {
|
|
|
9
9
|
speedDelta?: number | ((speed: number, increasing: boolean) => number);
|
|
10
10
|
speedUnitLabel?: string;
|
|
11
11
|
initial?: number;
|
|
12
|
-
|
|
12
|
+
isDecrementDisabled?: boolean;
|
|
13
|
+
isIncrementDisabled?: boolean;
|
|
14
|
+
onSelectedValue?: (value: number) => void;
|
|
13
15
|
}
|
|
14
16
|
export declare const MetricMeter: React.FC<MetricMeterProps>;
|
|
15
17
|
export default MetricMeter;
|
|
@@ -10,9 +10,9 @@ const MetricMeter = ({
|
|
|
10
10
|
speedDelta = 10,
|
|
11
11
|
initial = 0,
|
|
12
12
|
speedUnitLabel = "Mbps",
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
isDecrementDisabled = false,
|
|
14
|
+
isIncrementDisabled = false,
|
|
15
|
+
onSelectedValue = (e) => console.log(e)
|
|
16
16
|
}) => {
|
|
17
17
|
const [speed, setSpeed] = useState(initial);
|
|
18
18
|
const increaseSpeed = () => {
|
|
@@ -45,22 +45,12 @@ const MetricMeter = ({
|
|
|
45
45
|
percentFilled = 0.01;
|
|
46
46
|
}
|
|
47
47
|
const offset = start - spread * percentFilled;
|
|
48
|
-
const incrementalDisabled = speed === maxSpeed;
|
|
49
|
-
const decrementDisabled = speed === minSpeed;
|
|
48
|
+
const incrementalDisabled = speed === maxSpeed || isIncrementDisabled;
|
|
49
|
+
const decrementDisabled = speed === minSpeed || isDecrementDisabled;
|
|
50
50
|
return /* @__PURE__ */ jsxs("div", { className: css("metricmeter"), children: [
|
|
51
51
|
title && /* @__PURE__ */ jsx("h3", { children: title }),
|
|
52
52
|
/* @__PURE__ */ jsx("div", { className: css("__svg-container"), children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 400 400", className: css("__svg"), children: [
|
|
53
|
-
/* @__PURE__ */ jsx(
|
|
54
|
-
"circle",
|
|
55
|
-
{
|
|
56
|
-
cx: "200",
|
|
57
|
-
cy: "200",
|
|
58
|
-
r: radius,
|
|
59
|
-
strokeWidth: "32",
|
|
60
|
-
stroke: backgroundColor,
|
|
61
|
-
fill: "none"
|
|
62
|
-
}
|
|
63
|
-
),
|
|
53
|
+
/* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "32", stroke: backgroundColor, fill: "none" }),
|
|
64
54
|
/* @__PURE__ */ jsx(
|
|
65
55
|
"circle",
|
|
66
56
|
{
|
|
@@ -77,12 +67,28 @@ const MetricMeter = ({
|
|
|
77
67
|
)
|
|
78
68
|
] }) }),
|
|
79
69
|
/* @__PURE__ */ jsxs("div", { className: css("__controls"), children: [
|
|
80
|
-
/* @__PURE__ */ jsx(
|
|
70
|
+
/* @__PURE__ */ jsx(
|
|
71
|
+
"button",
|
|
72
|
+
{
|
|
73
|
+
className: css("__button--decrease") + " " + css("__button") + (decrementDisabled ? " " + css("__button--disabled") : ""),
|
|
74
|
+
onClick: decreaseSpeed,
|
|
75
|
+
disabled: decrementDisabled,
|
|
76
|
+
children: "—"
|
|
77
|
+
}
|
|
78
|
+
),
|
|
81
79
|
/* @__PURE__ */ jsxs("div", { className: css("__label-container"), children: [
|
|
82
80
|
/* @__PURE__ */ jsx("p", { className: css("__speed-label"), children: speed }),
|
|
83
81
|
/* @__PURE__ */ jsx("p", { className: css("__speed-unit-label"), children: speedUnitLabel })
|
|
84
82
|
] }),
|
|
85
|
-
/* @__PURE__ */ jsx(
|
|
83
|
+
/* @__PURE__ */ jsx(
|
|
84
|
+
"button",
|
|
85
|
+
{
|
|
86
|
+
className: css("__button") + (incrementalDisabled ? " " + css("__button--disabled") : ""),
|
|
87
|
+
onClick: increaseSpeed,
|
|
88
|
+
disabled: incrementalDisabled,
|
|
89
|
+
children: "+"
|
|
90
|
+
}
|
|
91
|
+
)
|
|
86
92
|
] })
|
|
87
93
|
] });
|
|
88
94
|
};
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
require("react/jsx-runtime");
|
|
4
4
|
require("react");
|
|
5
5
|
require("@radix-ui/react-dialog");
|
|
6
|
+
require("../footer/index.cjs");
|
|
6
7
|
require("../pagination/index.cjs");
|
|
7
8
|
require("../select/index.cjs");
|
|
8
9
|
require("../avatar/index.cjs");
|
|
@@ -12,6 +12,7 @@ require("@radix-ui/react-slot");
|
|
|
12
12
|
require("@radix-ui/react-use-controllable-state");
|
|
13
13
|
require("../../utils/generate-styling/index.cjs");
|
|
14
14
|
require("../../tokens/motion/variables.cjs");
|
|
15
|
+
require("../footer/index.cjs");
|
|
15
16
|
require("../pagination/index.cjs");
|
|
16
17
|
require("../select/index.cjs");
|
|
17
18
|
require("../avatar/index.cjs");
|
|
@@ -113,7 +113,7 @@ declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMen
|
|
|
113
113
|
variant?: "default" | "float" | undefined;
|
|
114
114
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
115
115
|
Link: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & {
|
|
116
|
-
variant?: "
|
|
116
|
+
variant?: "small" | "button" | "default" | undefined;
|
|
117
117
|
} & React.RefAttributes<HTMLAnchorElement>>;
|
|
118
118
|
Indicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
119
119
|
Viewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -10,6 +10,7 @@ import "@radix-ui/react-slot";
|
|
|
10
10
|
import "@radix-ui/react-use-controllable-state";
|
|
11
11
|
import "../../utils/generate-styling/index.js";
|
|
12
12
|
import "../../tokens/motion/variables.js";
|
|
13
|
+
import "../footer/index.js";
|
|
13
14
|
import "../pagination/index.js";
|
|
14
15
|
import "../select/index.js";
|
|
15
16
|
import "../avatar/index.js";
|
|
@@ -3,7 +3,7 @@ import { Icon as PrimitiveIcon } from '../icon';
|
|
|
3
3
|
|
|
4
4
|
export type IconProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveIcon>>;
|
|
5
5
|
export declare const Icon: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
|
|
6
|
-
name: "
|
|
7
|
-
size?: ("
|
|
6
|
+
name: "search" | "split" | "link" | "alert" | "menu" | "radio" | "email" | "key" | "add" | "reverse" | "infinite" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "map" | "summary" | "time" | "video" | "image" | "stop" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "download" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shortcut" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "sync" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-neutral" | "smiley-sad" | "smiley-very-happy" | "smiley-very-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "AI-star" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "smart-connect" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "youtube" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
|
|
7
|
+
size?: ("sm" | "md" | "lg" | "xl" | "xs" | "font" | "xxs") | undefined;
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
}, "ref">> & React.RefAttributes<SVGSVGElement>>;
|
|
@@ -98,7 +98,7 @@ declare const Notification: import('react').ForwardRefExoticComponent<Omit<Omit<
|
|
|
98
98
|
backgroundImageSrc?: string | undefined;
|
|
99
99
|
imageGradient?: ("dark" | "light" | "default") | undefined;
|
|
100
100
|
layout?: import('../card/card').Layout | undefined;
|
|
101
|
-
} & import('react').RefAttributes<HTMLDivElement>, "ref">, "
|
|
101
|
+
} & import('react').RefAttributes<HTMLDivElement>, "ref">, "layout" | "as" | "variant"> & {
|
|
102
102
|
variant?: "beige" | "gray" | "teal" | "error" | "warning" | "information" | "success" | undefined;
|
|
103
103
|
type?: "card" | "tile" | undefined;
|
|
104
104
|
open?: boolean | undefined;
|
|
@@ -3,7 +3,7 @@ import { Icon as IconPrimitives } from '../icon';
|
|
|
3
3
|
|
|
4
4
|
export type IconProps = Partial<React.ComponentPropsWithoutRef<typeof IconPrimitives>>;
|
|
5
5
|
export declare const Icon: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
|
|
6
|
-
name: "
|
|
7
|
-
size?: ("
|
|
6
|
+
name: "search" | "split" | "link" | "alert" | "menu" | "radio" | "email" | "key" | "add" | "reverse" | "infinite" | "visible" | "copy" | "help" | "zoom-out" | "filter" | "x" | "zoom" | "map" | "summary" | "time" | "video" | "image" | "stop" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "download" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "play" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shortcut" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "sync" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-neutral" | "smiley-sad" | "smiley-very-happy" | "smiley-very-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "AI-star" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "focus" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "smart-connect" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid-norway" | "bankid" | "facebook" | "instagram" | "linkedin" | "snapchat" | "telia-logo" | "whatsapp" | "windows" | "youtube" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "error" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
|
|
7
|
+
size?: ("sm" | "md" | "lg" | "xl" | "xs" | "font" | "xxs") | undefined;
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
}, "ref">> & React.RefAttributes<SVGSVGElement>>;
|
|
@@ -68,7 +68,7 @@ export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<R
|
|
|
68
68
|
backgroundImageSrc?: string | undefined;
|
|
69
69
|
imageGradient?: ("dark" | "light" | "default") | undefined;
|
|
70
70
|
layout?: import('../card/card').Layout | undefined;
|
|
71
|
-
} & React.RefAttributes<HTMLDivElement>, "ref">, "
|
|
71
|
+
} & React.RefAttributes<HTMLDivElement>, "ref">, "layout" | "as" | "variant"> & {
|
|
72
72
|
/**
|
|
73
73
|
* The variant of the notification.
|
|
74
74
|
*
|
|
@@ -36,7 +36,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<PrimitiveButto
|
|
|
36
36
|
/**
|
|
37
37
|
* Button variant type
|
|
38
38
|
*/
|
|
39
|
-
variant?: "
|
|
39
|
+
variant?: "ellipsis" | "page" | "next" | "prev" | undefined;
|
|
40
40
|
/**
|
|
41
41
|
* Page number for page buttons
|
|
42
42
|
*/
|
|
@@ -12,6 +12,7 @@ const reactSlot = require("@radix-ui/react-slot");
|
|
|
12
12
|
const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
|
|
13
13
|
const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
|
|
14
14
|
const tokens_motion_variables = require("../../tokens/motion/variables.cjs");
|
|
15
|
+
require("../footer/index.cjs");
|
|
15
16
|
require("../pagination/index.cjs");
|
|
16
17
|
require("../select/index.cjs");
|
|
17
18
|
require("../avatar/index.cjs");
|
|
@@ -10,6 +10,7 @@ import { Slot } from "@radix-ui/react-slot";
|
|
|
10
10
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
11
11
|
import { mergeStyles } from "../../utils/generate-styling/index.js";
|
|
12
12
|
import { teddyMotionDuration300 } from "../../tokens/motion/variables.js";
|
|
13
|
+
import "../footer/index.js";
|
|
13
14
|
import "../pagination/index.js";
|
|
14
15
|
import "../select/index.js";
|
|
15
16
|
import "../avatar/index.js";
|