Skip to content

Commit 861341d

Browse files
fcollonvalfcollonval
authored
Add more components (#26)
* Add badge * Add accordion * Add Menu * Add text-area * Expose new components * Add missing copyright * Add react wrapped components * Update lab demo * Fix styling * Add new snapshots * Update snapshots * Fix accordion highlight * Update screenshot * Bump playwright and use url to wait for web server * Update snapshots
1 parent 93c5ef1 commit 861341d

File tree

113 files changed

+2170
-195
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+2170
-195
lines changed

‎packages/components/docs/assets/toolkit-artwork.png‎

19.5 KB
Loading

‎packages/components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"@fortawesome/free-solid-svg-icons": "^5.15.4",
5252
"@microsoft/api-extractor": "^7.18.9",
5353
"@microsoft/eslint-config-fast-dna": "^1.2.0",
54-
"@playwright/test": "^1.17.0",
54+
"@playwright/test": "^1.19.0",
5555
"@rollup/plugin-commonjs": "^17.1.0",
5656
"@rollup/plugin-node-resolve": "^11.2.0",
5757
"@rollup/plugin-typescript": "^8.2.0",

‎packages/components/playwright.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const config: PlaywrightTestConfig = {
66
testMatch: 'tests-out/**/*.test.js',
77
webServer: {
88
command: 'yarn run start:ci',
9-
port: 6006,
9+
url: 'http://localhost:6006/iframe.html?id=accordion--default',
1010
timeout: 120 * 1000,
1111
// It is safe to reuse the server for stories testing
1212
reuseExistingServer: true

‎packages/components/src/accordion-item/accordion-item.stories.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import { setTheme } from '../utilities/storybook';
5+
6+
export default {
7+
title: 'Accordion Item',
8+
9+
parameters: {
10+
controls: {
11+
disabled: true
12+
},
13+
actions: {
14+
disabled: true
15+
}
16+
}
17+
};
18+
19+
const Template = (
20+
args,
21+
{ globals: { backgrounds, accent }, parameters }
22+
): string => {
23+
setTheme(accent, parameters.backgrounds, backgrounds);
24+
25+
return `<jp-accordion-item>
26+
Accordion one content<div slot="heading">Accordion one</div>
27+
</jp-accordion-item>`;
28+
};
29+
30+
export const Default = Template.bind({});
31+
Default.args = {};

‎packages/components/src/accordion-item/accordion-item.styles.ts‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Copyright (c) Microsoft Corporation.
3+
// Distributed under the terms of the Modified BSD License.
4+
5+
import { accentFillFocus } from '@microsoft/fast-components';
6+
import { css, ElementStyles } from '@microsoft/fast-element';
7+
import {
8+
AccordionItemOptions,
9+
display,
10+
focusVisible,
11+
forcedColorsStylesheetBehavior,
12+
FoundationElementTemplate
13+
} from '@microsoft/fast-foundation';
14+
import { SystemColors } from '@microsoft/fast-web-utilities';
15+
import {
16+
accentFillRest,
17+
bodyFont,
18+
controlCornerRadius,
19+
density,
20+
designUnit,
21+
focusStrokeWidth,
22+
neutralForegroundRest,
23+
neutralStrokeDividerRest,
24+
strokeWidth,
25+
typeRampMinus1FontSize,
26+
typeRampMinus1LineHeight
27+
} from '@microsoft/fast-components';
28+
import { heightNumber } from '../styles/size';
29+
30+
/**
31+
* Styles for AccordionItem
32+
* @public
33+
*/
34+
export const accordionItemStyles: FoundationElementTemplate<
35+
ElementStyles,
36+
AccordionItemOptions
37+
> = (context, definition) =>
38+
css`
39+
${display('flex')} :host {
40+
box-sizing: border-box;
41+
font-family: ${bodyFont};
42+
flex-direction: column;
43+
font-size: ${typeRampMinus1FontSize};
44+
line-height: ${typeRampMinus1LineHeight};
45+
border-bottom: calc(${strokeWidth} * 1px) solid
46+
${neutralStrokeDividerRest};
47+
}
48+
49+
.region {
50+
display: none;
51+
padding: calc((6 + (${designUnit} * 2 * ${density})) * 1px);
52+
}
53+
54+
.heading {
55+
display: grid;
56+
position: relative;
57+
grid-template-columns: auto 1fr auto calc(${heightNumber} * 1px);
58+
}
59+
60+
.button {
61+
appearance: none;
62+
border: none;
63+
background: none;
64+
grid-column: 2;
65+
grid-row: 1;
66+
outline: none;
67+
padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
68+
text-align: left;
69+
height: calc(${heightNumber} * 1px);
70+
color: ${neutralForegroundRest};
71+
cursor: pointer;
72+
font-family: inherit;
73+
}
74+
75+
.button:hover {
76+
color: ${neutralForegroundRest};
77+
}
78+
79+
.button:active {
80+
color: ${neutralForegroundRest};
81+
}
82+
83+
.button::before {
84+
content: '';
85+
position: absolute;
86+
top: 0;
87+
left: 0;
88+
right: 0;
89+
bottom: 0;
90+
cursor: pointer;
91+
}
92+
93+
/* prettier-ignore */
94+
.button:${focusVisible}::before {
95+
outline: none;
96+
border: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};
97+
border-radius: calc(${controlCornerRadius} * 1px);
98+
}
99+
100+
:host([expanded]) .region {
101+
display: block;
102+
}
103+
104+
.icon {
105+
display: flex;
106+
align-items: center;
107+
justify-content: center;
108+
grid-column: 4;
109+
pointer-events: none;
110+
position: relative;
111+
}
112+
113+
slot[name='expanded-icon'],
114+
slot[name='collapsed-icon'] {
115+
fill: ${accentFillRest};
116+
}
117+
118+
slot[name='collapsed-icon'] {
119+
display: flex;
120+
}
121+
122+
:host([expanded]) slot[name='collapsed-icon'] {
123+
display: none;
124+
}
125+
126+
slot[name='expanded-icon'] {
127+
display: none;
128+
}
129+
130+
:host([expanded]) slot[name='expanded-icon'] {
131+
display: flex;
132+
}
133+
134+
.start {
135+
display: flex;
136+
align-items: center;
137+
padding-inline-start: calc(${designUnit} * 1px);
138+
justify-content: center;
139+
grid-column: 1;
140+
position: relative;
141+
}
142+
143+
.end {
144+
display: flex;
145+
align-items: center;
146+
justify-content: center;
147+
grid-column: 3;
148+
position: relative;
149+
}
150+
`.withBehaviors(
151+
forcedColorsStylesheetBehavior(
152+
css`
153+
/* prettier-ignore */
154+
.button:${focusVisible}::before {
155+
border-color: ${SystemColors.Highlight};
156+
}
157+
:host slot[name='collapsed-icon'],
158+
:host([expanded]) slot[name='expanded-icon'] {
159+
fill: ${SystemColors.ButtonText};
160+
}
161+
`
162+
)
163+
);

‎packages/components/src/accordion-item/accordion-item.test.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import { test, expect } from '@playwright/test';
5+
6+
test('Default', async ({ page }) => {
7+
await page.goto('/iframe.html?id=accordion-item--default');
8+
9+
expect(await page.locator('jp-accordion-item').screenshot()).toMatchSnapshot(
10+
'accordion-item-default.png'
11+
);
12+
});

‎packages/components/src/accordion-item/index.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import {
5+
AccordionItem,
6+
AccordionItemOptions,
7+
accordionItemTemplate as template
8+
} from '@microsoft/fast-foundation';
9+
import { accordionItemStyles as styles } from './accordion-item.styles';
10+
11+
/**
12+
* A function that returns a {@link @microsoft/fast-foundation#AccordionItem} registration for configuring the component with a DesignSystem.
13+
* Implements {@link @microsoft/fast-foundation#accordionItemTemplate}
14+
*
15+
*
16+
* @public
17+
* @remarks
18+
* Generates HTML Element: `<jp-accordion-item>`
19+
*/
20+
export const jpAccordionItem = AccordionItem.compose<AccordionItemOptions>({
21+
baseName: 'accordion-item',
22+
template,
23+
styles,
24+
collapsedIcon: /* html */ `
25+
<svg
26+
width="20"
27+
height="20"
28+
viewBox="0 0 20 20"
29+
xmlns="http://www.w3.org/2000/svg"
30+
>
31+
<path
32+
fill-rule="evenodd"
33+
clip-rule="evenodd"
34+
d="M16.22 3H3.78a.78.78 0 00-.78.78v12.44c0 .43.35.78.78.78h12.44c.43 0 .78-.35.78-.78V3.78a.78.78 0 00-.78-.78zM3.78 2h12.44C17.2 2 18 2.8 18 3.78v12.44c0 .98-.8 1.78-1.78 1.78H3.78C2.8 18 2 17.2 2 16.22V3.78C2 2.8 2.8 2 3.78 2zM11 9h3v2h-3v3H9v-3H6V9h3V6h2v3z"
35+
/>
36+
</svg>
37+
`,
38+
expandedIcon: /* html */ `
39+
<svg
40+
width="20"
41+
height="20"
42+
viewBox="0 0 20 20"
43+
xmlns="http://www.w3.org/2000/svg"
44+
>
45+
<path
46+
fill-rule="evenodd"
47+
clip-rule="evenodd"
48+
d="M3.78 3h12.44c.43 0 .78.35.78.78v12.44c0 .43-.35.78-.78.78H3.78a.78.78 0 01-.78-.78V3.78c0-.43.35-.78.78-.78zm12.44-1H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.78-.8 1.78-1.78V3.78C18 2.8 17.2 2 16.22 2zM14 9H6v2h8V9z"
49+
/>
50+
</svg>
51+
`
52+
});
53+
54+
/**
55+
* Base class for Accordion item
56+
* @public
57+
*/
58+
export { AccordionItem };
59+
60+
export { styles as accordionItemStyles };

‎packages/components/src/accordion/accordion.stories.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import { setTheme } from '../utilities/storybook';
5+
6+
export default {
7+
title: 'Accordion',
8+
9+
parameters: {
10+
controls: {
11+
disabled: true
12+
},
13+
actions: {
14+
disabled: true
15+
}
16+
}
17+
};
18+
19+
const Template = (
20+
args,
21+
{ globals: { backgrounds, accent }, parameters }
22+
): string => {
23+
setTheme(accent, parameters.backgrounds, backgrounds);
24+
25+
return `
26+
<jp-accordion>
27+
<jp-accordion-item expanded>
28+
<span slot="heading">Panel one</span>
29+
Panel one content
30+
</jp-accordion-item>
31+
<jp-accordion-item>
32+
<span slot="heading">Panel two</span>
33+
Panel two content
34+
</jp-accordion-item>
35+
<jp-accordion-item expanded>
36+
<span slot="heading">Panel three</span>
37+
Panel three content
38+
</jp-accordion-item>
39+
</jp-accordion>`;
40+
};
41+
42+
export const Default = Template.bind({});
43+
Default.args = {};

‎packages/components/src/accordion/accordion.test.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import { test, expect } from '@playwright/test';
5+
6+
test('Default', async ({ page }) => {
7+
await page.goto('/iframe.html?id=accordion--default');
8+
9+
expect(await page.locator('jp-accordion').screenshot()).toMatchSnapshot(
10+
'accordion-default.png'
11+
);
12+
});

‎packages/components/src/accordion/index.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import {
5+
Accordion,
6+
accordionTemplate as template
7+
} from '@microsoft/fast-foundation';
8+
import { accordionStyles as styles } from '@microsoft/fast-components';
9+
10+
export * from '../accordion-item/index';
11+
12+
/**
13+
* A function that returns a {@link @microsoft/fast-foundation#Accordion} registration for configuring the component with a DesignSystem.
14+
* Implements {@link @microsoft/fast-foundation#accordionTemplate}
15+
*
16+
*
17+
* @public
18+
* @remarks
19+
* Generates HTML Element: `<jp-accordion>`
20+
*/
21+
export const jpAccordion = Accordion.compose({
22+
baseName: 'accordion',
23+
template,
24+
styles
25+
});
26+
27+
/**
28+
* Base class for Accordion
29+
* @public
30+
*/
31+
export { Accordion };
32+
33+
export { styles as accordionStyles };

0 commit comments

Comments
 (0)