@amboss/design-system 1.0.9 → 1.0.12
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/CHANGELOG.md +64 -0
- package/README.md +30 -0
- package/build/index.js +1 -1
- package/build/index.js.map +1 -1
- package/build/src/index.d.ts +2 -1
- package/package.json +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,67 @@
|
|
|
1
|
+
# v1.0.12 (Thu Mar 03 2022)
|
|
2
|
+
|
|
3
|
+
### Release Notes
|
|
4
|
+
|
|
5
|
+
#### Upgraded Storybook version to 6.4.19 ([#425](https://github.com/amboss-mededu/amboss-design-system/pull/425))
|
|
6
|
+
|
|
7
|
+
Upgraded Storybook version to 6.4.19
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
#### 🐛 Bug Fix
|
|
12
|
+
|
|
13
|
+
- Upgraded Storybook version to 6.4.19 [#425](https://github.com/amboss-mededu/amboss-design-system/pull/425) ([@Hadh](https://github.com/Hadh))
|
|
14
|
+
|
|
15
|
+
#### Authors: 1
|
|
16
|
+
|
|
17
|
+
- Hadhemi ([@Hadh](https://github.com/Hadh))
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# v1.0.11 (Thu Mar 03 2022)
|
|
22
|
+
|
|
23
|
+
### Release Notes
|
|
24
|
+
|
|
25
|
+
#### Added Button component documentation ([#424](https://github.com/amboss-mededu/amboss-design-system/pull/424))
|
|
26
|
+
|
|
27
|
+
Added the button component documentation
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
#### 🐛 Bug Fix
|
|
32
|
+
|
|
33
|
+
- Added Button component documentation [#424](https://github.com/amboss-mededu/amboss-design-system/pull/424) ([@Hadh](https://github.com/Hadh))
|
|
34
|
+
|
|
35
|
+
#### Authors: 1
|
|
36
|
+
|
|
37
|
+
- Hadhemi ([@Hadh](https://github.com/Hadh))
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
# v1.0.10 (Tue Feb 15 2022)
|
|
42
|
+
|
|
43
|
+
### Release Notes
|
|
44
|
+
|
|
45
|
+
#### Add CacheProvider and createCache as exports ([#421](https://github.com/amboss-mededu/amboss-design-system/pull/421))
|
|
46
|
+
|
|
47
|
+
Enable emotional DS components to work in the shadow-dom.
|
|
48
|
+
https://github.com/emotion-js/emotion/issues/1366
|
|
49
|
+
https://emotion.sh/docs/cache-provider
|
|
50
|
+
https://stackblitz.com/edit/emotion-shadow-dom-example?file=ShadowDomContainer.js
|
|
51
|
+
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
#### 🐛 Bug Fix
|
|
56
|
+
|
|
57
|
+
- Add CacheProvider and createCache as exports [#421](https://github.com/amboss-mededu/amboss-design-system/pull/421) ([@AlexJeffcott](https://github.com/AlexJeffcott))
|
|
58
|
+
|
|
59
|
+
#### Authors: 1
|
|
60
|
+
|
|
61
|
+
- Alex ([@AlexJeffcott](https://github.com/AlexJeffcott))
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
1
65
|
# v1.0.9 (Fri Feb 11 2022)
|
|
2
66
|
|
|
3
67
|
### Release Notes
|
package/README.md
CHANGED
|
@@ -255,3 +255,33 @@ export const Box = styled.div<BoxProps>(
|
|
|
255
255
|
);
|
|
256
256
|
```
|
|
257
257
|
|
|
258
|
+
## Shadow-DOM
|
|
259
|
+
In order to use emotion-enabled DS components in the shadow-dom, you need to take some steps to 'link' the styles in the light-dom (these are added by emotion using CSSStyleSheet.insertRule() which is why <style data-emotion> appears empty in the DOM).
|
|
260
|
+
|
|
261
|
+
emotion-js/emotion#1366
|
|
262
|
+
https://emotion.sh/docs/cache-provider
|
|
263
|
+
https://stackblitz.com/edit/emotion-shadow-dom-example?file=ShadowDomContainer.js
|
|
264
|
+
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
|
|
265
|
+
|
|
266
|
+
```js
|
|
267
|
+
import { ThemeProvider, light, Card, H1, CacheProvider, createCache } from '@amboss/design-system';
|
|
268
|
+
class SuchShadow extends HTMLElement {
|
|
269
|
+
connectedCallback() {
|
|
270
|
+
const root = document.createElement('div');
|
|
271
|
+
this.attachShadow({ mode: 'open' });
|
|
272
|
+
this.emotionCache = createCache({ container: this.shadowRoot });
|
|
273
|
+
render(
|
|
274
|
+
<ThemeProvider theme={light}>
|
|
275
|
+
<CacheProvider value={this.emotionCache}>
|
|
276
|
+
<Card>
|
|
277
|
+
<H1>I love you shadow unicorn!!!</H1>
|
|
278
|
+
</Card>
|
|
279
|
+
</CacheProvider>
|
|
280
|
+
</ThemeProvider>,
|
|
281
|
+
root
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
customElements.define('shadow-element', SuchShadow);
|
|
287
|
+
```
|