@universal-tennis/ui-shared 0.0.17 → 0.0.19
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/README.md +10 -0
- package/dist/stories/atoms/Typography/Typography.js +28 -4
- package/dist/stories/atoms/Typography/Typography.js.map +1 -1
- package/dist/stories/molecules/Cards/ContactCard.js +2 -2
- package/dist/stories/molecules/Cards/ContactCard.js.map +1 -1
- package/package.json +1 -1
- package/src/stories/atoms/Typography/Typography.tsx +35 -1
- package/src/stories/molecules/Cards/ContactCard.tsx +2 -2
package/README.md
CHANGED
|
@@ -100,6 +100,16 @@ It can now be accessed in another repo like this:
|
|
|
100
100
|
<br />
|
|
101
101
|
`import {Button} from "@universal-tennis/ui-shared";`
|
|
102
102
|
|
|
103
|
+
### Development on Local
|
|
104
|
+
|
|
105
|
+
1. Create a new branch and make changes: (for this example "sample-link-branch")
|
|
106
|
+
2. Push changes to the branch / test before with storybook.
|
|
107
|
+
3. Run `npm install https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch` from the other repo to view these updates.
|
|
108
|
+
In this url (https://<USER>@bitbucket.org/<ORG>/<REPO>#<BRANCH>)
|
|
109
|
+
4. You can now see the changes from your npm branch in a different repo.
|
|
110
|
+
you'll now see in your package.json:
|
|
111
|
+
```"@universal-tennis/ui-shared": "git+https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch"```
|
|
112
|
+
|
|
103
113
|
|
|
104
114
|
## Available Scripts
|
|
105
115
|
|
|
@@ -49,28 +49,52 @@ const SECONDARY_SIZES = {
|
|
|
49
49
|
const DisplayTypography = styled(MuiTypography)((props) => ({
|
|
50
50
|
fontFamily: 'var(--display-font)',
|
|
51
51
|
fontSize: DISPLAY_SIZES[props.size],
|
|
52
|
+
fontWeight: props.weight
|
|
52
53
|
}));
|
|
53
54
|
const PrimaryTypography = styled(MuiTypography)((props) => ({
|
|
54
55
|
fontFamily: 'var(--primary-font)',
|
|
55
56
|
fontSize: PRIMARY_SIZES[props.size],
|
|
57
|
+
fontWeight: props.weight
|
|
56
58
|
}));
|
|
57
59
|
const SecondaryTypography = styled(MuiTypography)((props) => ({
|
|
58
60
|
fontFamily: 'var(--secondary-font)',
|
|
59
61
|
fontSize: SECONDARY_SIZES[props.size],
|
|
60
|
-
textTransform: props.isCap ? 'uppercase' : 'inherit'
|
|
62
|
+
textTransform: props.isCap ? 'uppercase' : 'inherit',
|
|
63
|
+
fontWeight: props.weight
|
|
61
64
|
}));
|
|
62
65
|
export default function Typography(_a) {
|
|
63
66
|
var { children, category, size } = _a, props = __rest(_a, ["children", "category", "size"]);
|
|
64
67
|
const isCap = size === null || size === void 0 ? void 0 : size.includes("cap");
|
|
68
|
+
let weight;
|
|
69
|
+
switch (true) {
|
|
70
|
+
case size === null || size === void 0 ? void 0 : size.includes("light"):
|
|
71
|
+
weight = 300;
|
|
72
|
+
break;
|
|
73
|
+
case size === null || size === void 0 ? void 0 : size.includes("book"):
|
|
74
|
+
weight = 400;
|
|
75
|
+
break;
|
|
76
|
+
case size === null || size === void 0 ? void 0 : size.includes("medium"):
|
|
77
|
+
weight = 500;
|
|
78
|
+
break;
|
|
79
|
+
case size === null || size === void 0 ? void 0 : size.includes("semibold"):
|
|
80
|
+
weight = 600;
|
|
81
|
+
break;
|
|
82
|
+
case size === null || size === void 0 ? void 0 : size.includes("bold"):
|
|
83
|
+
weight = 700;
|
|
84
|
+
break;
|
|
85
|
+
default:
|
|
86
|
+
weight = 500;
|
|
87
|
+
break;
|
|
88
|
+
}
|
|
65
89
|
switch (category) {
|
|
66
90
|
case 'primary':
|
|
67
91
|
return (React.createElement(PrimaryTypography, Object.assign({ size: size }, props), children));
|
|
68
92
|
case 'secondary':
|
|
69
|
-
return (React.createElement(SecondaryTypography, Object.assign({ size: size, isCap: isCap }, props), children));
|
|
93
|
+
return (React.createElement(SecondaryTypography, Object.assign({ size: size, isCap: isCap, weight: weight }, props), children));
|
|
70
94
|
case 'display':
|
|
71
|
-
return (React.createElement(DisplayTypography, Object.assign({ size: size }, props), children));
|
|
95
|
+
return (React.createElement(DisplayTypography, Object.assign({ size: size, weight: weight }, props), children));
|
|
72
96
|
default:
|
|
73
|
-
return (React.createElement(PrimaryTypography, Object.assign({ size: size }, props), children));
|
|
97
|
+
return (React.createElement(PrimaryTypography, Object.assign({ size: size, weight: weight }, props), children));
|
|
74
98
|
}
|
|
75
99
|
}
|
|
76
100
|
//# sourceMappingURL=Typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,aAAa,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
|
|
|
16
16
|
import Link from '@mui/material/Link';
|
|
17
17
|
import Button from '../../atoms/Button/Button';
|
|
18
18
|
import Typography from '../../atoms/Typography/Typography';
|
|
19
|
-
import
|
|
19
|
+
import ChatIcon from '../../assets/icon-chat-blue.svg';
|
|
20
20
|
import { StyledCard } from './shared';
|
|
21
21
|
export default function ContactCard(_a) {
|
|
22
22
|
var { name, phone, email, handleOnMessageClick } = _a, props = __rest(_a, ["name", "phone", "email", "handleOnMessageClick"]);
|
|
@@ -33,7 +33,7 @@ export default function ContactCard(_a) {
|
|
|
33
33
|
React.createElement(Typography, { category: "secondary", size: "x-small-book" }, email))),
|
|
34
34
|
React.createElement(Button, { onClick: handleOnMessageClick, category: "link", style: { marginTop: '8px' } },
|
|
35
35
|
React.createElement(React.Fragment, null,
|
|
36
|
-
React.createElement(ChatIcon, { width:
|
|
36
|
+
React.createElement("img", { src: ChatIcon, alt: "message", style: { width: '20px' } }),
|
|
37
37
|
React.createElement(Typography, { style: { paddingLeft: '8px' }, category: "secondary", size: "x-small-book" }, `Message ${firstName}`)))));
|
|
38
38
|
}
|
|
39
39
|
//# sourceMappingURL=ContactCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,
|
|
1
|
+
{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAStC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAEjB;QAFiB,EAClC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,oBAAoB,OACvB,EAD4B,KAAK,cADhB,kDAEnC,CADmD;IAElD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,EAAE,CAAC;IAExD,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,IAAI,CAAc;QACtG,WAAW,IAAI,CAChB,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE;YACpE,oBAAC,sBAAsB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YAC1D,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CAC1E,CACN;QACA,KAAK,IAAI,CACV,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE;YACrE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YACrD,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACtE,CACN;QACD,oBAAC,MAAM,IAAC,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC;YAC9E;gBACE,6BAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,GAAI;gBAC5D,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAC5E,WAAW,SAAS,EAAE,CACd,CACZ,CACI,CACE,CAChB,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -13,6 +13,7 @@ type TypographyProps = {
|
|
|
13
13
|
type MuiTypographyProps = {
|
|
14
14
|
size?: string;
|
|
15
15
|
isCap?: boolean;
|
|
16
|
+
weight?: number;
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
const DISPLAY_SIZES = {
|
|
@@ -54,17 +55,20 @@ const SECONDARY_SIZES = {
|
|
|
54
55
|
const DisplayTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
|
|
55
56
|
fontFamily: 'var(--display-font)',
|
|
56
57
|
fontSize: DISPLAY_SIZES[props.size as keyof typeof DISPLAY_SIZES],
|
|
58
|
+
fontWeight: props.weight
|
|
57
59
|
}));
|
|
58
60
|
|
|
59
61
|
const PrimaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
|
|
60
62
|
fontFamily: 'var(--primary-font)',
|
|
61
63
|
fontSize: PRIMARY_SIZES[props.size as keyof typeof PRIMARY_SIZES],
|
|
64
|
+
fontWeight: props.weight
|
|
62
65
|
}));
|
|
63
66
|
|
|
64
67
|
const SecondaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
|
|
65
68
|
fontFamily: 'var(--secondary-font)',
|
|
66
69
|
fontSize: SECONDARY_SIZES[props.size as keyof typeof SECONDARY_SIZES],
|
|
67
|
-
textTransform: props.isCap ? 'uppercase' : 'inherit'
|
|
70
|
+
textTransform: props.isCap ? 'uppercase' : 'inherit',
|
|
71
|
+
fontWeight: props.weight
|
|
68
72
|
}));
|
|
69
73
|
|
|
70
74
|
export default function Typography({
|
|
@@ -72,6 +76,33 @@ export default function Typography({
|
|
|
72
76
|
}: TypographyProps) {
|
|
73
77
|
const isCap = size?.includes("cap");
|
|
74
78
|
|
|
79
|
+
let weight;
|
|
80
|
+
switch (true) {
|
|
81
|
+
case size?.includes("light"):
|
|
82
|
+
weight = 300;
|
|
83
|
+
break;
|
|
84
|
+
case size?.includes("book"):
|
|
85
|
+
weight = 400;
|
|
86
|
+
break;
|
|
87
|
+
|
|
88
|
+
case size?.includes("medium"):
|
|
89
|
+
weight = 500;
|
|
90
|
+
break;
|
|
91
|
+
|
|
92
|
+
case size?.includes("semibold"):
|
|
93
|
+
weight = 600;
|
|
94
|
+
break;
|
|
95
|
+
|
|
96
|
+
case size?.includes("bold"):
|
|
97
|
+
weight = 700;
|
|
98
|
+
|
|
99
|
+
break;
|
|
100
|
+
default:
|
|
101
|
+
weight = 500;
|
|
102
|
+
|
|
103
|
+
break;
|
|
104
|
+
}
|
|
105
|
+
|
|
75
106
|
switch (category) {
|
|
76
107
|
case 'primary':
|
|
77
108
|
return (
|
|
@@ -87,6 +118,7 @@ export default function Typography({
|
|
|
87
118
|
<SecondaryTypography
|
|
88
119
|
size={size}
|
|
89
120
|
isCap={isCap}
|
|
121
|
+
weight={weight}
|
|
90
122
|
{...props}
|
|
91
123
|
>
|
|
92
124
|
{children}
|
|
@@ -96,6 +128,7 @@ export default function Typography({
|
|
|
96
128
|
return (
|
|
97
129
|
<DisplayTypography
|
|
98
130
|
size={size}
|
|
131
|
+
weight={weight}
|
|
99
132
|
{...props}
|
|
100
133
|
>
|
|
101
134
|
{children}
|
|
@@ -105,6 +138,7 @@ export default function Typography({
|
|
|
105
138
|
return (
|
|
106
139
|
<PrimaryTypography
|
|
107
140
|
size={size}
|
|
141
|
+
weight={weight}
|
|
108
142
|
{...props}
|
|
109
143
|
>
|
|
110
144
|
{children}
|
|
@@ -5,7 +5,7 @@ import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
|
|
|
5
5
|
import Link from '@mui/material/Link';
|
|
6
6
|
import Button from '../../atoms/Button/Button';
|
|
7
7
|
import Typography from '../../atoms/Typography/Typography';
|
|
8
|
-
import
|
|
8
|
+
import ChatIcon from '../../assets/icon-chat-blue.svg';
|
|
9
9
|
|
|
10
10
|
import { StyledCard } from './shared';
|
|
11
11
|
|
|
@@ -42,7 +42,7 @@ export default function ContactCard({
|
|
|
42
42
|
)}
|
|
43
43
|
<Button onClick={handleOnMessageClick} category="link" style={{marginTop: '8px'}}>
|
|
44
44
|
<>
|
|
45
|
-
<ChatIcon
|
|
45
|
+
<img src={ChatIcon} alt="message" style={{width: '20px'}} />
|
|
46
46
|
<Typography style={{paddingLeft: '8px'}} category="secondary" size="x-small-book">
|
|
47
47
|
{`Message ${firstName}`}
|
|
48
48
|
</Typography>
|