Skip to content

Commit 7a2b5d4

Browse files
fcollonvalfcollonval
committed
Wrap as react components the new ones
1 parent b1af2f7 commit 7a2b5d4

File tree

6 files changed

+173
-22
lines changed

6 files changed

+173
-22
lines changed

‎packages/components/src/design-system-provider/index.ts

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -225,28 +225,6 @@ export class DesignSystemProvider extends FoundationElement {
225225
@designToken(neutralColor)
226226
public neutralColor?: Swatch;
227227

228-
// /**
229-
// * Defines the palette that all neutral color recipes are derived from.
230-
// * This is an array for hexadecimal color strings ordered from light to dark.
231-
// *
232-
// * @remarks
233-
// * HTML attribute: N/A
234-
// */
235-
// // @observable
236-
// @designToken(neutralPalette)
237-
// public neutralPalette: Palette;
238-
239-
// /**
240-
// * Defines the palette that all accent color recipes are derived from.
241-
// * This is an array for hexadecimal color strings ordered from light to dark.
242-
// *
243-
// * @remarks
244-
// * HTML attribute: N/A
245-
// */
246-
// // @observable
247-
// @designToken(accentPalette)
248-
// public accentPalette: Palette;
249-
250228
/**
251229
*
252230
* The density offset, used with designUnit to calculate height and spacing.

‎packages/react-components/src/design-system-provider/index.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import {
5+
provideJupyterDesignSystem,
6+
jpDesignSystemProvider
7+
} from '@jupyter/web-components';
8+
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
9+
import React from 'react';
10+
11+
const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
12+
13+
export const DesignSystemProvider: React.DetailedHTMLFactory<
14+
React.HTMLAttributes<HTMLElement> & {
15+
'no-paint'?: boolean;
16+
'fill-color'?: string;
17+
'accent-color'?: string;
18+
'neutral-color'?: string;
19+
density?: number;
20+
'design-unit'?: number;
21+
direction?: 'ltr' | 'rtl';
22+
'base-height-multiplier'?: number;
23+
'base-horizontal-spacing-multiplier'?: number;
24+
'control-corner-radius'?: number;
25+
'stroke-width'?: number;
26+
'focus-stroke-width'?: number;
27+
'disabled-opacity'?: number;
28+
'type-ramp-minus-2-font-size'?: string;
29+
'type-ramp-minus-2-line-height'?: string;
30+
'type-ramp-minus-1-font-size'?: string;
31+
'type-ramp-minus-1-line-height'?: string;
32+
'type-ramp-base-font-size'?: string;
33+
'type-ramp-base-line-height'?: string;
34+
'type-ramp-plus-1-font-size'?: string;
35+
'type-ramp-plus-1-line-height'?: string;
36+
'type-ramp-plus-2-font-size'?: string;
37+
'type-ramp-plus-2-line-height'?: string;
38+
'type-ramp-plus-3-font-size'?: string;
39+
'type-ramp-plus-3-line-height'?: string;
40+
'type-ramp-plus-4-font-size'?: string;
41+
'type-ramp-plus-4-line-height'?: string;
42+
'type-ramp-plus-5-font-size'?: string;
43+
'type-ramp-plus-5-line-height'?: string;
44+
'type-ramp-plus-6-font-size'?: string;
45+
'type-ramp-plus-6-line-height'?: string;
46+
'accent-fill-rest-delta'?: number;
47+
'accent-fill-hover-delta'?: number;
48+
'accent-fill-active-delta'?: number;
49+
'accent-fill-focus-delta'?: number;
50+
'accent-foreground-rest-delta'?: number;
51+
'accent-foreground-hover-delta'?: number;
52+
'accent-foreground-active-delta'?: number;
53+
'accent-foreground-focus-delta'?: number;
54+
'neutral-fill-rest-delta'?: number;
55+
'neutral-fill-hover-delta'?: number;
56+
'neutral-fill-active-delta'?: number;
57+
'neutral-fill-focus-delta'?: number;
58+
'neutral-fill-input-rest-delta'?: number;
59+
'neutral-fill-input-hover-delta'?: number;
60+
'neutral-fill-input-active-delta'?: number;
61+
'neutral-fill-input-focus-delta'?: number;
62+
'neutral-fill-stealth-rest-delta'?: number;
63+
'neutral-fill-stealth-hover-delta'?: number;
64+
'neutral-fill-stealth-active-delta'?: number;
65+
'neutral-fill-stealth-focus-delta'?: number;
66+
'neutral-fill-strong-hover-delta'?: number;
67+
'neutral-fill-strong-active-delta'?: number;
68+
'neutral-fill-strong-focus-delta'?: number;
69+
'base-layer-luminance'?: number;
70+
'neutral-fill-layer-rest-delta'?: number;
71+
'neutral-stroke-divider-rest-delta'?: number;
72+
'neutral-stroke-rest-delta'?: number;
73+
'neutral-stroke-hover-delta'?: number;
74+
'neutral-stroke-active-delta'?: number;
75+
'neutral-stroke-focus-delta'?: number;
76+
},
77+
HTMLElement
78+
> = wrap(jpDesignSystemProvider()) as any;
79+
// @ts-expect-error unknown property
80+
DesignSystemProvider.displayName = 'Jupyter.DesignSystemProvider';

‎packages/react-components/src/disclosure/index.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import {
5+
provideJupyterDesignSystem,
6+
jpDisclosure
7+
} from '@jupyter/web-components';
8+
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
9+
import React from 'react';
10+
11+
const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
12+
13+
export const Disclosure: React.DetailedHTMLFactory<
14+
React.HTMLAttributes<HTMLElement> & {
15+
appearance?: 'accent' | 'lightweight';
16+
expanded?: boolean;
17+
title?: string;
18+
},
19+
HTMLElement
20+
> = wrap(jpDisclosure(), {
21+
events: { onToggle: 'toggle' }
22+
}) as any;
23+
// @ts-expect-error unknown property
24+
Disclosure.displayName = 'Jupyter.Disclosure';

‎packages/react-components/src/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,23 @@ export * from './checkbox';
1515
export * from './combobox';
1616
export * from './data-grid';
1717
export * from './date-field';
18+
export * from './design-system-provider';
1819
export * from './dialog';
20+
export * from './disclosure';
1921
export * from './divider';
2022
export * from './listbox';
2123
export * from './menu';
2224
export * from './menu-item';
2325
export * from './number-field';
2426
export * from './option';
27+
export * from './picker';
2528
export * from './progress';
2629
export * from './progress-ring';
2730
export * from './radio';
2831
export * from './radio-group';
2932
export * from './search';
3033
export * from './select';
34+
export * from './skeleton';
3135
export * from './slider';
3236
export * from './slider-label';
3337
export * from './switch';

‎packages/react-components/src/picker/index.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import { provideJupyterDesignSystem, jpPicker } from '@jupyter/web-components';
5+
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
6+
import React from 'react';
7+
8+
const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
9+
10+
/**
11+
* @alpha
12+
*/
13+
export const Picker: React.DetailedHTMLFactory<
14+
React.HTMLAttributes<HTMLElement> & {
15+
selection?: string;
16+
options?: string;
17+
'filter-selected'?: boolean;
18+
'filter-query'?: boolean;
19+
'max-selected'?: number;
20+
'no-suggestions-text'?: string;
21+
'suggestions-available-text'?: string;
22+
'loading-text'?: string;
23+
label?: string;
24+
labelledby?: string;
25+
placeholder?: string;
26+
'menu-placement'?:
27+
| 'bottom'
28+
| 'bottom-fill'
29+
| 'tallest'
30+
| 'tallest-fill'
31+
| 'top'
32+
| 'top-fill';
33+
},
34+
HTMLElement
35+
> = wrap(jpPicker(), {
36+
events: {
37+
onChange: 'change',
38+
onInput: 'input'
39+
}
40+
}) as any;
41+
// @ts-expect-error unknown property
42+
Picker.displayName = 'Jupyter.Picker';

‎packages/react-components/src/skeleton/index.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import {
5+
provideJupyterDesignSystem,
6+
jpSkeleton
7+
} from '@jupyter/web-components';
8+
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
9+
import React from 'react';
10+
11+
const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
12+
13+
export const Skeleton: React.DetailedHTMLFactory<
14+
React.HTMLAttributes<HTMLElement> & {
15+
fill?: string;
16+
shape?: 'rect' | 'circle';
17+
pattern?: string;
18+
shimmer?: boolean;
19+
},
20+
HTMLElement
21+
> = wrap(jpSkeleton()) as any;
22+
// @ts-expect-error unknown property
23+
Skeleton.displayName = 'Jupyter.Skeleton';

0 commit comments

Comments
 (0)