@goodhood-web/ui 1.0.4 → 1.1.0-development.10
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/index.js +10 -10
- package/index.mjs +783 -773
- package/lib/BaseButton/BaseButton.d.ts +2 -1
- package/lib/Card/Card.d.ts +1 -1
- package/lib/Card/Card.types.d.ts +1 -0
- package/lib/Icon/icons/32x32/index.d.ts +3 -0
- package/lib/Icon/icons/index.d.ts +3 -0
- package/lib/MenuItem/MenuItem.d.ts +1 -1
- package/lib/MenuItem/MenuItem.types.d.ts +5 -3
- package/package.json +6 -2
- package/style.css +1 -1
- package/styles/_design-tokens.scss +1 -0
- package/styles/_functions.scss +25 -0
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { ButtonOwnProps } from '@mui/base';
|
|
2
|
+
import { AriaRole } from 'react';
|
|
3
3
|
export interface BaseButtonProps extends ButtonOwnProps {
|
|
4
4
|
ariaLabel?: string;
|
|
5
5
|
ariaLabelledBy?: string;
|
|
6
6
|
className?: string;
|
|
7
7
|
onClick: () => void;
|
|
8
8
|
ref?: React.ForwardedRef<null>;
|
|
9
|
+
role?: AriaRole;
|
|
9
10
|
}
|
|
10
11
|
declare const BaseButton: (props: BaseButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export default BaseButton;
|
package/lib/Card/Card.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { CardProps } from './Card.types';
|
|
2
|
-
declare const Card: ({ ariaLabel, as: Tag, borderRadius, children, role, }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Card: ({ ariaLabel, as: Tag, borderRadius, children, className, role, }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Card;
|
package/lib/Card/Card.types.d.ts
CHANGED
|
@@ -6,5 +6,6 @@ export interface CardProps {
|
|
|
6
6
|
as?: Extract<keyof JSX.IntrinsicElements, 'section' | 'div'>;
|
|
7
7
|
borderRadius?: boolean;
|
|
8
8
|
children: React.ReactElement<CardBodyProps | CardHeaderProps> | React.ReactElement<CardBodyProps | CardHeaderProps>[];
|
|
9
|
+
className?: string;
|
|
9
10
|
role?: string;
|
|
10
11
|
}
|
|
@@ -144,6 +144,9 @@ declare const IconsMap: {
|
|
|
144
144
|
readonly list: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
|
|
145
145
|
title?: string | undefined;
|
|
146
146
|
}>;
|
|
147
|
+
readonly log_in: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
|
|
148
|
+
title?: string | undefined;
|
|
149
|
+
}>;
|
|
147
150
|
readonly log_out: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
|
|
148
151
|
title?: string | undefined;
|
|
149
152
|
}>;
|
|
@@ -273,6 +273,9 @@ declare const iconsMap: {
|
|
|
273
273
|
readonly list: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
|
|
274
274
|
title?: string | undefined;
|
|
275
275
|
}>;
|
|
276
|
+
readonly log_in: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
|
|
277
|
+
title?: string | undefined;
|
|
278
|
+
}>;
|
|
276
279
|
readonly log_out: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
|
|
277
280
|
title?: string | undefined;
|
|
278
281
|
}>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { MenuItemProps } from './MenuItem.types';
|
|
2
|
-
declare const MenuItem: ({ isSelected, labelPillText, leftIcon, onClick, rightIcon, text, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const MenuItem: ({ isSelected, labelPillText, leftIcon, onClick, rightIcon, role, text, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default MenuItem;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import { BaseButtonProps } from '../BaseButton/BaseButton';
|
|
2
3
|
export interface MenuItemProps {
|
|
3
4
|
isSelected?: boolean;
|
|
4
|
-
labelPillText
|
|
5
|
+
labelPillText?: string;
|
|
5
6
|
leftIcon: ReactNode;
|
|
6
|
-
onClick:
|
|
7
|
-
rightIcon
|
|
7
|
+
onClick: BaseButtonProps['onClick'];
|
|
8
|
+
rightIcon?: ReactNode;
|
|
9
|
+
role?: BaseButtonProps['role'];
|
|
8
10
|
text: string;
|
|
9
11
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@goodhood-web/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.1.0-development.10",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -13,5 +13,9 @@
|
|
|
13
13
|
"registry": "https://registry.npmjs.org/",
|
|
14
14
|
"access": "public"
|
|
15
15
|
},
|
|
16
|
-
"private": false
|
|
16
|
+
"private": false,
|
|
17
|
+
"peerDependencies": {
|
|
18
|
+
"@mui/base": "^5.0.0-beta.27",
|
|
19
|
+
"@goodhood/design-tokens": "dev"
|
|
20
|
+
}
|
|
17
21
|
}
|
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._baseBtn_sadyt_9{min-width:2rem;min-height:2rem;border:none;border-radius:0;cursor:pointer}._baseBtn--active_sadyt_16{background:#b1b1b1}._root_1bveu_9{display:flex;overflow:hidden;width:100%;flex-direction:column;padding:16px;background-color:#fff;box-shadow:0 2px 8px #0000001a;color:#201649}._root--border-radius_1bveu_19{border-radius:8px}._root_19l77_9{padding:8px 0;color:inherit}._iconComponent_10k1r_9{display:block}._iconComponent_10k1r_9 path{stroke:currentColor}._iconButton_mrpxf_9{display:flex;width:auto;min-width:unset;height:auto;min-height:unset;flex-shrink:0;align-items:center;justify-content:center;color:#201649}._iconButton_mrpxf_9:disabled{background:none}._iconButton_mrpxf_9:hover,._iconButton_mrpxf_9:active{background:none}._iconButton--circular_mrpxf_29{border-radius:50%;background:#cae85d}._iconButton--circular_mrpxf_29:disabled{background:#ffffff}._iconButton--circular_mrpxf_29:hover{background:#b5d622}._iconButton--circular_mrpxf_29:active{background:#cae85d}._iconButton--circular-small_mrpxf_42{width:40px;height:40px}._iconButton--circular-medium_mrpxf_46{width:48px;height:48px}._iconButton--circular-large_mrpxf_50{width:56px;height:56px}._root_10lxp_9{display:flex;align-items:center;padding-bottom:12px;color:inherit;gap:8px}._title_10lxp_17{flex-grow:1;margin:0}._h1_1bi97_9{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:32px;font-weight:500;letter-spacing:0;line-height:40px;text-decoration:none;text-indent:0px;text-transform:none}._h2_1bi97_21{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:24px;font-weight:Semi Bold;letter-spacing:0;line-height:32px;text-decoration:none;text-indent:0px;text-transform:none}._h3_1bi97_33{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:20px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h4_1bi97_45{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:18px;font-weight:700;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h5_1bi97_57{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:Semi Bold;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._h6_1bi97_69{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:1;line-height:24px;text-decoration:none;text-indent:0px;text-transform:uppercase}._h7_1bi97_81{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:Extra Bold;letter-spacing:1;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._h8_1bi97_93{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:Extra Bold;letter-spacing:1.5;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._body-large_1bi97_105{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:0;line-height:24px;text-decoration:none;text-indent:0px;text-transform:none}._body-regular_1bi97_117{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._body-semibold_1bi97_129{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:Semi Bold;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._body-italic_1bi97_141{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:Italic;letter-spacing:0;line-height:20px;text-decoration:none;text-indent:0px;text-transform:none}._detail-medium_1bi97_153{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:none}._detail-bold_1bi97_165{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:none}._detail-upper-case_1bi97_177{margin-bottom:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:Extra Bold;letter-spacing:0;line-height:16px;text-decoration:none;text-indent:0px;text-transform:uppercase}._ccBtn_1lqve_9{display:flex;width:100%;height:40px;align-items:center;align-self:stretch;padding:8px 16px;border-color:transparent;border-radius:12px;background-color:#f4f3f6;color:#201649;cursor:pointer;font-size:14px}._dividerContainer_12tzl_9{display:flex;align-items:center}._dividerLine_12tzl_14{height:1px;flex-grow:1;background-color:#d2d0db}._fieldset_1bk9b_9{border:none}._labelPill_3esmw_9{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:#01819C}._labelPill_3esmw_9 span{color:#fff;line-height:16px;text-align:center}._labelPill--small_3esmw_21{height:20px;padding:0 8px}._labelPill--small_3esmw_21 span{font-size:10px;font-weight:800;text-transform:uppercase}._labelPill--medium_3esmw_30{padding:4px 8px}._labelPill--medium_3esmw_30 span{font-size:12px;font-weight:700}._legend_k3se6_9{display:flex;flex-direction:column;padding-bottom:12px;gap:8px}._legend_k3se6_9 ._text_k3se6_15{color:#635c80}._menuItem_hic8l_9{display:flex;width:100%;flex-shrink:0;align-items:center;padding:0 8px;background-color:#fff;color:#201649;cursor:pointer;gap:8px;text-decoration:none}._menuItem_hic8l_9 ._highlightFrame_hic8l_21{display:flex;flex:1;align-items:center;padding:8px;border-radius:8px;gap:8px}._menuItem_hic8l_9 ._rightIcon_hic8l_29{display:inherit;margin-left:auto}._menuItem_hic8l_9 ._rightIcon_hic8l_29 svg path{stroke:#635c80!important}._menuItem--selected_hic8l_36{color:#201649}._menuItem--selected_hic8l_36 ._highlightFrame_hic8l_21{background-color:#f2fbc4}._menuItem--selected_hic8l_36 ._highlightFrame_hic8l_21 svg path{stroke:#738c00}._menuItem--selected_hic8l_36:hover{color:#738c00}._menuItem_hic8l_9:not(._menuItem--selected_hic8l_36):hover{color:#635c80}._menuItem_hic8l_9:not(._menuItem--selected_hic8l_36):hover svg path{stroke:#635c80}._menuItem_hic8l_9:not(._menuItem--selected_hic8l_36):hover ._highlightFrame_hic8l_21{background-color:#f4f3f6}._bubbleContent_1frdd_9{position:relative;display:inline-block}._bubble_1frdd_9{position:absolute;z-index:auto;top:6px;right:6px;display:flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background-color:#ff9de2;color:#201649;font-size:12px;font-weight:700;text-align:center;transform:translate(50%,-50%);transform-origin:100% 0;white-space:nowrap}._bubble--empty_1frdd_34{width:12px;height:12px}._root_slyzs_16{position:relative;overflow:hidden;flex-shrink:0;border:solid 1px #d2d0db;background-color:#d2d0db}._root--24_slyzs_23{width:24px;height:24px}._root--28_slyzs_27{width:28px;height:28px}._root--32_slyzs_31{width:32px;height:32px}._root--40_slyzs_35{width:40px;height:40px}._root--48_slyzs_39{width:48px;height:48px}._root--56_slyzs_43{width:56px;height:56px}._root--64_slyzs_47{width:64px;height:64px}._root--80_slyzs_51{width:80px;height:80px}._root--120_slyzs_55{width:120px;height:120px}._root--280_slyzs_59{width:280px;height:280px}._root--square_slyzs_63._root--24_slyzs_23,._root--square_slyzs_63._root--32_slyzs_31{border-radius:4px}._root--square_slyzs_63._root--40_slyzs_35,._root--square_slyzs_63._root--48_slyzs_39{border-radius:8px}._root--square_slyzs_63._root--56_slyzs_43,._root--square_slyzs_63._root--64_slyzs_47{border-radius:12px}._root--square_slyzs_63._root--80_slyzs_51,._root--square_slyzs_63._root--120_slyzs_55{border-radius:16px}._root--circular_slyzs_75{border-radius:50%}._root--isPlaceholder_slyzs_78:before{position:absolute;z-index:1;width:100%;height:100%;background-color:#d2d0db;content:"";opacity:.4}._root_slyzs_16 img{width:100%;height:100%;object-fit:cover}._switch_1jnsf_9{position:relative;display:inline-block;width:48px;height:28px}._switch_1jnsf_9 input{position:absolute;z-index:2;width:48px;height:28px;cursor:pointer;opacity:0}._switch_1jnsf_9 ._slider_1jnsf_23{z-index:1;display:block;width:100%;height:100%;border-radius:34px;background-color:#e9e8ed;box-shadow:0 1px 3px #0003 inset;cursor:pointer;transition:.4s}._switch_1jnsf_9 ._slider_1jnsf_23:before{position:absolute;right:3px;bottom:2px;width:24px;height:24px;border-radius:50%;background-color:#fff;box-shadow:0 0 2px #0003;content:"";transform:translate(-18px);transition:.4s}._switch_1jnsf_9 ._slider_1jnsf_23._focusVisible_1jnsf_47{box-shadow:0 0 0 3px #cae85d}._switch_1jnsf_9 input:checked+._slider_1jnsf_23{background-color:#201649}._switch_1jnsf_9 input:checked+._slider_1jnsf_23:before{transform:translate(0)}._toggleInput_1kwf8_9{display:flex;width:100%;align-items:center;padding:8px 16px;background-color:#fff;color:#635c80;cursor:pointer;gap:12px}._toggleInput_1kwf8_9 svg{flex-shrink:0}._toggleInput_1kwf8_9 ._textLabel_1kwf8_22{flex-grow:1}._toggleInput_1kwf8_9 ._switch_1kwf8_25{flex-shrink:0}._toggleInput--checked_1kwf8_28{color:#201649}._toggleInput--withBorder_1kwf8_31{padding:12px 16px;border-radius:16px;box-shadow:inset 0 0 0 1px #d2d0db}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward '@goodhood/design-tokens/lib/web/index';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
|
|
3
|
+
@forward 'design-tokens';
|
|
4
|
+
|
|
5
|
+
@function mapGet($map, $keys...) {
|
|
6
|
+
$value: map.get($map, $keys...);
|
|
7
|
+
|
|
8
|
+
@if not $value {
|
|
9
|
+
@error "Value not found for keys: #{$keys}";
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@return $value;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@function getSemanticColor($color, $shade) {
|
|
16
|
+
@return mapGet($tokens, color, semantic, $color, $shade);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@function getSpacing($spacingType) {
|
|
20
|
+
@return mapGet($tokens, spacing, $spacingType);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@function getBorderRadius($spacingType) {
|
|
24
|
+
@return mapGet($tokens, borderRadius, $spacingType);
|
|
25
|
+
}
|