@ndlib/component-library 0.0.7 → 0.0.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/README.md +101 -0
- package/dist/components/elements/BrandingBar/BrandingBar.stories.d.ts +6 -0
- package/dist/components/elements/BrandingBar/BrandingBar.stories.js +11 -0
- package/dist/components/elements/BrandingBar/index.d.ts +1 -0
- package/dist/components/elements/BrandingBar/index.js +52 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/theme/Color.stories.js +16 -0
- package/dist/theme/colors.d.ts +17 -1
- package/dist/theme/colors.js +32 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# Hesburgh Component Library
|
|
2
|
+
|
|
3
|
+
This is the repo for The Hesburgh Component Library, a set of React components that escapsulate the
|
|
4
|
+
design patterns used by the Hesburgh Library IT department.
|
|
5
|
+
|
|
6
|
+
## Using the library
|
|
7
|
+
### Installation
|
|
8
|
+
To install the library in your project, run
|
|
9
|
+
```
|
|
10
|
+
yarn install @ndlib/component-library
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Setup
|
|
14
|
+
|
|
15
|
+
#### UiProvider
|
|
16
|
+
In order for styles to be applied correctly, the `UiProvider` component must be included at the top of your project.
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
<UiProvider>
|
|
20
|
+
<App>
|
|
21
|
+
</UiProvider>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
For frameworks that split application code by pages, it is recommended to add this provider at the root level rather than
|
|
25
|
+
at the page level. In Gatsby, this can be done using the [wrapRootElement](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement) browser API.
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
exports.wrapRootElement = ({ element }) => {
|
|
29
|
+
return (
|
|
30
|
+
<UiProvider>
|
|
31
|
+
{element}
|
|
32
|
+
</UiProvider>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
#### Configuring Link
|
|
38
|
+
By default, the `Link` component in this library will use a native HTML `<a>` component in its implementation. This behavior can be overriden
|
|
39
|
+
by setting the `link.internalLink` and/or `link.externalLink` property on the `components` prop of the `UiProvider` component. If a custom component
|
|
40
|
+
is provided, the custom component will be rendered by when the <Link /> component is used. It will receive the same props the <Link> receives, as well as an
|
|
41
|
+
`sx` object with default link styles from the theme and any custom styles provided.
|
|
42
|
+
|
|
43
|
+
Note that the `theme-ui` jsx transform is needed in order to convert the `sx` prop into a stylesheet definition.
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
/** @jsxImportSource theme-ui */
|
|
47
|
+
import { Link } from 'gatsby'
|
|
48
|
+
|
|
49
|
+
const CustomInternalLink = ({ sx, ...rest}) => ()
|
|
50
|
+
return <Link sx={sx} {...rest} />
|
|
51
|
+
)
|
|
52
|
+
|
|
53
|
+
const WrappedApp = () => {
|
|
54
|
+
<UiProvider components={{
|
|
55
|
+
link: {
|
|
56
|
+
internalLink: CustomInternalLink
|
|
57
|
+
}
|
|
58
|
+
}}>
|
|
59
|
+
<App />
|
|
60
|
+
</UiProvider>
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Running locally
|
|
65
|
+
Dependencies must be installed before storybook can be started. Dependencies can be installed with: `yarn install`.
|
|
66
|
+
|
|
67
|
+
To build and deploy your storybook locally for development, run `yarn start`
|
|
68
|
+
|
|
69
|
+
## Deploying Storybook
|
|
70
|
+
Whenever a commit is added to the main branch, the contents of the `/docs` folder will be deployed to our Github pages site.
|
|
71
|
+
|
|
72
|
+
To build a new version of the storybook to be deployed, run `yarn build-storybook`. Our storybook build uses [vite](https://vitejs.dev/).
|
|
73
|
+
|
|
74
|
+
## Running tests
|
|
75
|
+
Tests are run using [vitest](https://vitest.dev/), a test-runner built for vite that is similar to jest. Test suite can be run with: `yarn test`
|
|
76
|
+
|
|
77
|
+
## Linting
|
|
78
|
+
Changes should be linted before commits. Run our linter with `yarn lint`. Failed linting will block builds and deploys. Our lint process uses `eslint` and `prettier`.
|
|
79
|
+
Running `yarn lint:fix` will fix any issues that can be automatically fixed.
|
|
80
|
+
|
|
81
|
+
## Building for npm
|
|
82
|
+
The build process for the npm module for this library uses `tsc`. ESM exports are used to better support tree-shaking. When adding new code to this library,
|
|
83
|
+
be careful to ensure than importing the module do not cause side-effects. In other words, don't execute any process or do any state management outside
|
|
84
|
+
of exported properties or functions because this code might be removed by tree-shaker. See examples below:
|
|
85
|
+
|
|
86
|
+
### Wrong
|
|
87
|
+
```jsx
|
|
88
|
+
// This code may get removed by tree-shaker
|
|
89
|
+
setTimeout(() => {
|
|
90
|
+
console.log('hello world')
|
|
91
|
+
})
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Right
|
|
95
|
+
```jsx
|
|
96
|
+
export const myFunction = () => {
|
|
97
|
+
setTimeout(() => {
|
|
98
|
+
console.log('hello world')
|
|
99
|
+
})
|
|
100
|
+
}
|
|
101
|
+
```
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { BrandingBar } from '.';
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'Elements/BrandingBar',
|
|
5
|
+
component: BrandingBar,
|
|
6
|
+
tags: ['autodocs'],
|
|
7
|
+
};
|
|
8
|
+
export default meta;
|
|
9
|
+
export const Default = {
|
|
10
|
+
render: () => (_jsx(BrandingBar, {}))
|
|
11
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const BrandingBar: () => import("@theme-ui/core").ThemeUIJSX.Element;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
2
|
+
import { COLOR } from "../../../theme/colors";
|
|
3
|
+
const ProvostImage = 'data:image/png;base64,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';
|
|
4
|
+
const UniversityLogo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlcAAABkCAMAAACclOWcAAAABGdBTUEAALGPC/xhBQAAADNQTFRF////////////////////////////////////////////////////////////AAAA////FbWC9gAAABB0Uk5TcI+vUM8w358gYO8Qf0C/AK6MYRQAAAmFSURBVHja7ZzrlqyqDoVVFOVavv/TbgFFLlGxu/qMM/ae80+v0hJD+AghWqv7QND31cEFELiCwBUEriAIXEHgCgJXEASuIHAFgSsIAlcQuILAFQSBKwhcQeAKgsAVBK4gcAVB4AoCVxC4giBwBYErCFxBELiCwBUEriAIXEHgCgJXEASuIHAFgSsIAlcQuPq/09R1C7wArr5MlR36VQKsfyFXyhjzPLCi/Ar7BgyT3JzVr/rnDRgz/c+s/Zl71de4WuyuwX3U+4fzTuHzvH8cwsc+mcPp5cEtxyH2SZqMvhI2k0iM0Xrej2pB+VaMqxOfk2N9fjcvK/N7jGscz6OD1sRrh0afS+cVQ8Sr3WiV36G03XrbVyvKsbux9iP00b++m+r4mam/sf307KDFdPm1sW5jqRtn1cj1uSWTi1dsdt2VwezFd3825yWml+48OxIMHr8bTNkv789Lls67kO8OXLqtgZmp84rBnR6dAVtjKSMz9xdaj09f+l9tzQ7GiO1LJk15eBiuZLw3e/z4uOObtj9nd7TvDtfq+DCLNq6GMNwLlXV5E3bXBxcm/vC3dT1lxt+Qs/zyG2s/nT8s/dHVlvc2ffBXuJxf274MfG/Hytj7OsZIqo19gDNPlA5fRDTf3UCEdZCfTvGf5mKm+XYPSxZ/War88nhoTByXt6hcg8HverXVhduZZcwa2KnbsPKX89wCb1/qqGUdPTXrPkQiHanP4jw7REsaqdpau4lry3p26cqF4Ua+Z+LTbK3rtVt6lftbx8oxnA3X367BMTgYx6hkxHec86lYNieB5Ri+EkB2mP9Rg7PIcWWjcT4slxmE7/E5ylm0+FSXn0M9xQ9SlTM0NlKsF3Y/4wdKV2NndoN0ZV/exyk/PmSntTu+7P9sXARdG+zmrHdRHPbShSLpzCQLsBqs1ceol4tr6nt9y1Xqcz86gkaPWky9w+Z8cO2HgORIGEiudMmNWWXasF0/j1wpmVwwVKlu2seR5MrH2vxUd04a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';
|
|
5
|
+
const sharedLinkStyle = {
|
|
6
|
+
backgroundSize: 'cover',
|
|
7
|
+
backgroundRepeat: 'no-repeat',
|
|
8
|
+
display: 'block',
|
|
9
|
+
height: '50px',
|
|
10
|
+
lineHeight: '50px',
|
|
11
|
+
overflow: 'hidden',
|
|
12
|
+
textIndent: '-9999px',
|
|
13
|
+
};
|
|
14
|
+
const universityLogo = Object.assign(Object.assign({}, sharedLinkStyle), { backgroundImage: `url(${UniversityLogo})`, margin: '0 auto', position: 'relative', width: '300px', '@media screen and (min-width: 800px)': {
|
|
15
|
+
left: '12px',
|
|
16
|
+
margin: '0',
|
|
17
|
+
position: 'absolute',
|
|
18
|
+
}, '@media screen and (min-width: 1212px)': {
|
|
19
|
+
left: '0',
|
|
20
|
+
} });
|
|
21
|
+
const provostLogo = Object.assign(Object.assign({}, sharedLinkStyle), { backgroundImage: `url(${ProvostImage})`, display: 'none', '@media screen and (min-width: 800px)': {
|
|
22
|
+
display: 'block',
|
|
23
|
+
position: 'absolute',
|
|
24
|
+
right: '12px',
|
|
25
|
+
width: '227px',
|
|
26
|
+
}, '@media screen and (min-width: 1212px)': {
|
|
27
|
+
right: '0',
|
|
28
|
+
} });
|
|
29
|
+
export const BrandingBar = () => {
|
|
30
|
+
return (_jsx("hgroup", Object.assign({ sx: {
|
|
31
|
+
backgroundColor: COLOR.ND_PROVOST_BLUE,
|
|
32
|
+
height: '50px',
|
|
33
|
+
display: 'block',
|
|
34
|
+
'a': {
|
|
35
|
+
color: COLOR.TEXT_ON_PRIMARY,
|
|
36
|
+
textDecoration: 'none',
|
|
37
|
+
}
|
|
38
|
+
} }, { children: _jsx("div", Object.assign({ sx: {
|
|
39
|
+
display: 'block',
|
|
40
|
+
margin: '0 auto',
|
|
41
|
+
maxWidth: '1200px',
|
|
42
|
+
padding: '0',
|
|
43
|
+
position: 'relative',
|
|
44
|
+
} }, { children: _jsxs("nav", Object.assign({ "aria-label": 'University of Notre Dame', sx: {
|
|
45
|
+
boxSizing: 'border-box',
|
|
46
|
+
display: 'block',
|
|
47
|
+
height: '50px',
|
|
48
|
+
position: 'relative',
|
|
49
|
+
overflow: 'hidden',
|
|
50
|
+
width: '100%',
|
|
51
|
+
} }, { children: [_jsxs("a", Object.assign({ sx: universityLogo, href: 'http://nd.edu' }, { children: ["University ", _jsx("i", { children: "of" }), " Notre Dame"] })), _jsxs("a", Object.assign({ sx: provostLogo, href: 'http://provost.nd.edu' }, { children: ["Office ", _jsx("i", { children: "of the" }), " Provost"] }))] })) })) })));
|
|
52
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { theme, ThemeProvider } from './theme';
|
|
2
2
|
export { COLOR } from './theme/colors';
|
|
3
3
|
export { TYPOGRAPHY_TYPE } from './theme/typography';
|
|
4
|
+
export { BrandingBar } from './components/elements/BrandingBar';
|
|
4
5
|
export { Button, BUTTON_SIZE } from './components/elements/Button';
|
|
5
6
|
export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
|
|
6
7
|
export { Label, LABEL_SIZE } from './components/elements/text/Label';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { theme, ThemeProvider } from './theme';
|
|
2
2
|
export { COLOR } from './theme/colors';
|
|
3
3
|
export { TYPOGRAPHY_TYPE } from './theme/typography';
|
|
4
|
+
export { BrandingBar } from './components/elements/BrandingBar';
|
|
4
5
|
export { Button, BUTTON_SIZE } from './components/elements/Button';
|
|
5
6
|
export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
|
|
6
7
|
export { Label, LABEL_SIZE } from './components/elements/text/Label';
|
|
@@ -20,6 +20,22 @@ const colors = [
|
|
|
20
20
|
{ color: COLOR.SECONDARY, label: 'SECONDARY' },
|
|
21
21
|
{ color: COLOR.SECONDARY_HIGHLIGHT, label: 'SECONDARY_HIGHLIGHT' },
|
|
22
22
|
{ color: COLOR.TEXT_ON_SECONDARY, label: 'TEXT_ON_SECONDARY' },
|
|
23
|
+
{ color: COLOR.ND_BLUE, label: 'ND_BLUE' },
|
|
24
|
+
{ color: COLOR.ND_GOLD, label: 'ND_GOLD' },
|
|
25
|
+
{ color: COLOR.ND_METALLIC_GOLD, label: 'ND_METALLIC_GOLD' },
|
|
26
|
+
{ color: COLOR.ND_PROVOST_BLUE, label: 'ND_PROVOST_BLUE' },
|
|
27
|
+
{ color: COLOR.ND_SECONDARY_1, label: 'ND_SECONDARY_1' },
|
|
28
|
+
{ color: COLOR.ND_SECONDARY_2, label: 'ND_SECONDARY_2' },
|
|
29
|
+
{ color: COLOR.ND_SECONDARY_3, label: 'ND_SECONDARY_3' },
|
|
30
|
+
{ color: COLOR.ND_SECONDARY_4, label: 'ND_SECONDARY_4' },
|
|
31
|
+
{ color: COLOR.ND_SECONDARY_5, label: 'ND_SECONDARY_5' },
|
|
32
|
+
{ color: COLOR.ND_SECONDARY_6, label: 'ND_SECONDARY_6' },
|
|
33
|
+
{ color: COLOR.ND_TERTIARY_1, label: 'ND_TERTIARY_1' },
|
|
34
|
+
{ color: COLOR.ND_TERTIARY_2, label: 'ND_TERTIARY_2' },
|
|
35
|
+
{ color: COLOR.ND_TERTIARY_3, label: 'ND_TERTIARY_3' },
|
|
36
|
+
{ color: COLOR.ND_TERTIARY_4, label: 'ND_TERTIARY_4' },
|
|
37
|
+
{ color: COLOR.ND_TERTIARY_5, label: 'ND_TERTIARY_5' },
|
|
38
|
+
{ color: COLOR.ND_TERTIARY_6, label: 'ND_TERTIARY_6' },
|
|
23
39
|
];
|
|
24
40
|
export const Default = {
|
|
25
41
|
render: () => (_jsx(Row, Object.assign({ sx: { flexWrap: 'wrap' } }, { children: colors.map((color) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.GROUP, sx: { mr: 3, mt: 0, flexBasis: '100px' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: color.label })), _jsx(ColorSquare, { color: color.color })] })))) }))),
|
package/dist/theme/colors.d.ts
CHANGED
|
@@ -7,7 +7,23 @@ export declare enum COLOR {
|
|
|
7
7
|
SECONDARY = "secondary",
|
|
8
8
|
SECONDARY_HIGHLIGHT = "secondaryHighlight",
|
|
9
9
|
TEXT_ON_PRIMARY = "textOnPrimary",
|
|
10
|
-
TEXT_ON_SECONDARY = "textOnSecondary"
|
|
10
|
+
TEXT_ON_SECONDARY = "textOnSecondary",
|
|
11
|
+
ND_BLUE = "ndBlue",
|
|
12
|
+
ND_GOLD = "ndGold",
|
|
13
|
+
ND_METALLIC_GOLD = "ndMetallicGold",
|
|
14
|
+
ND_PROVOST_BLUE = "ndProvostBlue",
|
|
15
|
+
ND_SECONDARY_1 = "ndSecondary1",
|
|
16
|
+
ND_SECONDARY_2 = "ndSecondary2",
|
|
17
|
+
ND_SECONDARY_3 = "ndSecondary3",
|
|
18
|
+
ND_SECONDARY_4 = "ndSecondary4",
|
|
19
|
+
ND_SECONDARY_5 = "ndSecondary5",
|
|
20
|
+
ND_SECONDARY_6 = "ndSecondary6",
|
|
21
|
+
ND_TERTIARY_1 = "ndTertiary1",
|
|
22
|
+
ND_TERTIARY_2 = "ndTertiary2",
|
|
23
|
+
ND_TERTIARY_3 = "ndTertiary3",
|
|
24
|
+
ND_TERTIARY_4 = "ndTertiary4",
|
|
25
|
+
ND_TERTIARY_5 = "ndTertiary5",
|
|
26
|
+
ND_TERTIARY_6 = "ndTertiary6"
|
|
11
27
|
}
|
|
12
28
|
export declare const colors: {
|
|
13
29
|
[key in COLOR]: string;
|
package/dist/theme/colors.js
CHANGED
|
@@ -9,6 +9,22 @@ export var COLOR;
|
|
|
9
9
|
COLOR["SECONDARY_HIGHLIGHT"] = "secondaryHighlight";
|
|
10
10
|
COLOR["TEXT_ON_PRIMARY"] = "textOnPrimary";
|
|
11
11
|
COLOR["TEXT_ON_SECONDARY"] = "textOnSecondary";
|
|
12
|
+
COLOR["ND_BLUE"] = "ndBlue";
|
|
13
|
+
COLOR["ND_GOLD"] = "ndGold";
|
|
14
|
+
COLOR["ND_METALLIC_GOLD"] = "ndMetallicGold";
|
|
15
|
+
COLOR["ND_PROVOST_BLUE"] = "ndProvostBlue";
|
|
16
|
+
COLOR["ND_SECONDARY_1"] = "ndSecondary1";
|
|
17
|
+
COLOR["ND_SECONDARY_2"] = "ndSecondary2";
|
|
18
|
+
COLOR["ND_SECONDARY_3"] = "ndSecondary3";
|
|
19
|
+
COLOR["ND_SECONDARY_4"] = "ndSecondary4";
|
|
20
|
+
COLOR["ND_SECONDARY_5"] = "ndSecondary5";
|
|
21
|
+
COLOR["ND_SECONDARY_6"] = "ndSecondary6";
|
|
22
|
+
COLOR["ND_TERTIARY_1"] = "ndTertiary1";
|
|
23
|
+
COLOR["ND_TERTIARY_2"] = "ndTertiary2";
|
|
24
|
+
COLOR["ND_TERTIARY_3"] = "ndTertiary3";
|
|
25
|
+
COLOR["ND_TERTIARY_4"] = "ndTertiary4";
|
|
26
|
+
COLOR["ND_TERTIARY_5"] = "ndTertiary5";
|
|
27
|
+
COLOR["ND_TERTIARY_6"] = "ndTertiary6";
|
|
12
28
|
})(COLOR || (COLOR = {}));
|
|
13
29
|
export const colors = {
|
|
14
30
|
[COLOR.TEXT]: '#222222',
|
|
@@ -20,4 +36,20 @@ export const colors = {
|
|
|
20
36
|
[COLOR.SECONDARY]: '#f8e999',
|
|
21
37
|
[COLOR.SECONDARY_HIGHLIGHT]: '#ddcc70',
|
|
22
38
|
[COLOR.TEXT_ON_SECONDARY]: '#242111',
|
|
39
|
+
[COLOR.ND_BLUE]: '#0c2340',
|
|
40
|
+
[COLOR.ND_GOLD]: '#d39F10',
|
|
41
|
+
[COLOR.ND_METALLIC_GOLD]: '#ae9142',
|
|
42
|
+
[COLOR.ND_PROVOST_BLUE]: '#002a5d',
|
|
43
|
+
[COLOR.ND_SECONDARY_1]: '#5aabbc',
|
|
44
|
+
[COLOR.ND_SECONDARY_2]: '#999623',
|
|
45
|
+
[COLOR.ND_SECONDARY_3]: '#5f1709',
|
|
46
|
+
[COLOR.ND_SECONDARY_4]: '#465510',
|
|
47
|
+
[COLOR.ND_SECONDARY_5]: '#f6e7a1',
|
|
48
|
+
[COLOR.ND_SECONDARY_6]: '#302205',
|
|
49
|
+
[COLOR.ND_TERTIARY_1]: '#00823E',
|
|
50
|
+
[COLOR.ND_TERTIARY_2]: '#4a3651',
|
|
51
|
+
[COLOR.ND_TERTIARY_3]: '#ffcf01',
|
|
52
|
+
[COLOR.ND_TERTIARY_4]: '#aa272f',
|
|
53
|
+
[COLOR.ND_TERTIARY_5]: '#5a412f',
|
|
54
|
+
[COLOR.ND_TERTIARY_6]: '#ba6f2e',
|
|
23
55
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndlib/component-library",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"files": [
|
|
7
7
|
"dist",
|
|
8
8
|
"global.css"
|
|
9
9
|
],
|
|
10
|
+
"license": "MIT",
|
|
10
11
|
"main": "./dist/index.js",
|
|
11
12
|
"exports": {
|
|
12
13
|
".": "./dist/index.js",
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
"prettier": "prettier --check src/**/*.{ts,tsx}",
|
|
24
25
|
"prettify": "prettier --write src/**/*.{ts,tsx}",
|
|
25
26
|
"start": "storybook dev -p 6006",
|
|
26
|
-
"build-storybook": "storybook build -o
|
|
27
|
+
"build-storybook": "storybook build -o storybook && touch storybook/.nojekyll",
|
|
27
28
|
"build": "tsc"
|
|
28
29
|
},
|
|
29
30
|
"dependencies": {
|