Skip to content

Commit dbd09b0

Browse files
cal-smithcal-smith
authored
Merge pull request #467 from IBM/master
update breaking-changes
2 parents 7ed6c5b + 99c9da5 commit dbd09b0

File tree

203 files changed

+16662
-10752
lines changed

Some content is hidden

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

203 files changed

+16662
-10752
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ dist
77
demo/bundle
88
.idea
99
.vscode
10+
.cache
11+
.cache/
1012
doc/
1113
documentation/
1214
dist/

‎.storybook/addons.js‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,24 @@
1-
import '@storybook/addon-actions/register';
2-
import '@storybook/addon-links/register';
3-
import '@storybook/addon-notes/register';
4-
import '@storybook/addon-knobs/register'
1+
import "core-js/es6/symbol";
2+
import "core-js/es6/object";
3+
import "core-js/es6/function";
4+
import "core-js/es6/parse-int";
5+
import "core-js/es6/parse-float";
6+
import "core-js/es6/number";
7+
import "core-js/es6/math";
8+
import "core-js/es6/string";
9+
import "core-js/es6/date";
10+
import "core-js/es6/array";
11+
import "core-js/es6/regexp";
12+
import "core-js/es6/map";
13+
import "core-js/es6/set";
14+
import "core-js/es6/reflect";
15+
16+
import "core-js/es7/reflect";
17+
import "zone.js/dist/zone";
18+
19+
import '@storybook/addon-storysource/register';
20+
import "@storybook/addon-actions/register";
21+
import "@storybook/addon-links/register";
22+
import "@storybook/addon-notes/register";
23+
import "@storybook/addon-knobs/register";
24+
import '@storybook/addon-options/register';

‎.storybook/config.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,39 @@
1-
import { configure } from "@storybook/angular";
1+
import "core-js/es6/symbol";
2+
import "core-js/es6/object";
3+
import "core-js/es6/function";
4+
import "core-js/es6/parse-int";
5+
import "core-js/es6/parse-float";
6+
import "core-js/es6/number";
7+
import "core-js/es6/math";
8+
import "core-js/es6/string";
9+
import "core-js/es6/date";
10+
import "core-js/es6/array";
11+
import "core-js/es6/regexp";
12+
import "core-js/es6/map";
13+
import "core-js/es6/set";
14+
import "core-js/es6/reflect";
15+
16+
import "core-js/es7/reflect";
17+
import "zone.js/dist/zone";
18+
19+
import { configure, addDecorator } from "@storybook/angular";
20+
import { withOptions } from '@storybook/addon-options';
21+
22+
addDecorator(
23+
withOptions({
24+
name: "carbon components angular",
25+
url: "https://github.com/IBM/carbon-components-angular",
26+
})
27+
);
228

329
// load global styles
430
require("!style-loader!css-loader!sass-loader!./preview.scss");
31+
require("!style-loader!css-loader!sass-loader!./preview-experimental.scss");
532

633
require("../src/index.stories");
734
// automatically import all files ending in *.stories.ts
835
const req = require.context("../src", true, /.stories.ts$/);
36+
937
function loadStories() {
1038
req.keys()
1139
.sort((path1, path2) => path1.split("/").slice(-1)[0] > path2.split("/").slice(-1)[0] ? 1 : -1)

‎.storybook/experimental.component.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
Component,
3+
AfterViewInit,
4+
OnDestroy,
5+
Input,
6+
Output,
7+
EventEmitter
8+
} from "@angular/core";
9+
import { ExperimentalService } from "../src/experimental.module";
10+
11+
@Component({
12+
selector: "app-experimental-component",
13+
template: ``
14+
})
15+
export class ExperimentalComponenent implements AfterViewInit, OnDestroy {
16+
@Input() set isExperimental(value: boolean) {
17+
this.experimental.isExperimental = value;
18+
this.isExperimentalChange.emit(this.experimental.isExperimental);
19+
}
20+
@Output() isExperimentalChange = new EventEmitter();
21+
22+
constructor(protected experimental: ExperimentalService) {
23+
experimental.isExperimental = false;
24+
this.isExperimentalChange.emit(this.isExperimental);
25+
}
26+
27+
ngAfterViewInit() {
28+
this.toggleExperimental();
29+
document.querySelectorAll(".toggle-btn").forEach(button => {
30+
button.addEventListener("click", this.toggleExperimental);
31+
});
32+
}
33+
34+
ngOnDestroy() {
35+
document.querySelectorAll(".toggle-btn").forEach(button => {
36+
button.removeEventListener("click", this.toggleExperimental);
37+
});
38+
}
39+
40+
// arrow function to capture the correct `this`
41+
toggleExperimental = () => {
42+
if (document.body.classList.contains("experimental")) {
43+
this.experimental.isExperimental = true;
44+
} else {
45+
this.experimental.isExperimental = false;
46+
}
47+
this.isExperimentalChange.emit(this.experimental.isExperimental);
48+
}
49+
}

‎.storybook/manager-head.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,92 @@
1+
<!-- Open Graph -->
12
<meta property="og:title" content="Carbon Components Angular">
23
<meta property="og:description" content="An Angular implementation of the Carbon Design System for IBM.">
34
<meta property="og:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
45
<meta property="og:url" content="https://angular.carbondesignsystem.com">
56

7+
<!-- Social -->
68
<meta name="twitter:title" content="Carbon Components Angular">
79
<meta name="twitter:description" content="An Angular implementation of the Carbon Design System for IBM.">
810
<meta name="twitter:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
911
<meta name="twitter:card" content="summary_large_image">
12+
13+
<!-- Storybook override -->
14+
<script>
15+
document.title = "Carbon Components Angular";
16+
</script>
17+
18+
<style id="iframestyle">
19+
.sb-show-main:not(.welcome) {
20+
padding: 3em;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
}
25+
.experimental .toggle-btn,
26+
.toggle-btn {
27+
padding: 9px;
28+
background: white;
29+
border: none;
30+
border-radius: 5px;
31+
color: darkcyan;
32+
transition: all 0.2s ease-out;
33+
outline: 0;
34+
cursor: pointer;
35+
}
36+
.experimental .experimental-selected,
37+
.experimental-selected {
38+
background: darkcyan;
39+
color: white;
40+
}
41+
</style>
42+
43+
<script>
44+
function setExperimental(event) {
45+
var frame = document.querySelector("#storybook-preview-iframe");
46+
var classList = frame.contentDocument.body.classList;
47+
if(event.target.previousElementSibling) {
48+
classList.add("experimental");
49+
classList.remove("carbon");
50+
event.target.previousElementSibling.classList.remove("experimental-selected");
51+
} else {
52+
classList.remove("experimental");
53+
classList.add("carbon");
54+
event.target.nextElementSibling.classList.remove("experimental-selected");
55+
}
56+
event.target.classList.add("experimental-selected");
57+
};
58+
59+
var experimentalToggleInterval = setInterval(function() {
60+
var frame = document.querySelector("#storybook-preview-iframe");
61+
if(!frame ||
62+
!frame.contentDocument ||
63+
!frame.contentDocument.getElementById("root")) {
64+
return;
65+
}
66+
67+
frame.contentDocument.head.appendChild(
68+
document.getElementById("iframestyle")
69+
);
70+
71+
clearInterval(experimentalToggleInterval);
72+
frame.contentDocument.body.insertAdjacentHTML(
73+
"beforeend",
74+
`<div style="position: fixed; right: 15px; bottom: 15px">
75+
<button
76+
class="toggle-btn experimental-selected"
77+
onclick="setExperimental(event)">
78+
Standard
79+
</button>
80+
<button
81+
class="toggle-btn"
82+
onclick="setExperimental(event)">
83+
Experimental
84+
</button>
85+
</div>
86+
`);
87+
frame.contentWindow.setExperimental = setExperimental;
88+
89+
var classList = frame.contentDocument.body.classList;
90+
classList.add("carbon");
91+
}, 100);
92+
</script>

‎.storybook/preview-experimental.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
$feature-flags: (
2+
components-x: true,
3+
ui-shell: true
4+
);
5+
6+
$css--body: false; // we're providing our own body styles
7+
$css--reset: false; // prevent thousands of resets being included...
8+
9+
.experimental {
10+
@import '~carbon-components/scss/globals/scss/styles';
11+
@import '~carbon-components/scss/globals/scss/css--typography';
12+
13+
// carbon body reset and styles
14+
@include typography;
15+
@include font-family;
16+
// reset
17+
color: $text-01;
18+
background-color: $ui-02;
19+
line-height: 1;
20+
box-sizing: border-box;
21+
margin: 0;
22+
padding: 0;
23+
border: 0;
24+
font-size: 100%;
25+
vertical-align: baseline;
26+
27+
& > *,
28+
& > *:before,
29+
& > *:after {
30+
box-sizing: inherit;
31+
}
32+
33+
ul {
34+
list-style: none;
35+
margin: 0;
36+
padding: 0;
37+
}
38+
}

‎.storybook/preview.scss‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,37 @@
1-
@import "~carbon-components/css/carbon-components.min.css";
1+
$feature-flags: (
2+
components-x: false,
3+
ui-shell: true
4+
);
25

3-
body {
4-
padding: 20px;
5-
// for tooltips/popovers ... can be on any chld element before the popover
6-
// but body is most conveient
7-
position: relative;
6+
$css--body: false; // we're providing our own body styles
7+
$css--reset: false; // prevent thousands of resets being included...
8+
9+
.carbon {
10+
@import '~carbon-components/scss/globals/scss/styles';
11+
@import '~carbon-components/scss/globals/scss/css--typography';
12+
13+
// carbon body reset and styles
14+
@include typography;
15+
@include font-family;
16+
//reset
17+
color: $text-01;
18+
background-color: $ui-02;
19+
box-sizing: border-box;
20+
margin: 0;
21+
padding: 0;
22+
border: 0;
23+
font-size: 100%;
24+
vertical-align: baseline;
25+
26+
& > *,
27+
& > *:before,
28+
& > *:after {
29+
box-sizing: inherit;
30+
}
31+
32+
ul {
33+
list-style: none;
34+
margin: 0;
35+
padding: 0;
36+
}
837
}

‎.storybook/webpack.config.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const path = require('path');
2+
3+
module.exports = ({config, mode}) => {
4+
config.module.rules.push({
5+
test: [/\.stories\.tsx?$/, /index\.ts$/],
6+
loaders: [
7+
{
8+
loader: require.resolve('@storybook/addon-storysource/loader'),
9+
options: {
10+
parser: 'typescript',
11+
},
12+
},
13+
],
14+
include: [path.resolve(__dirname, '../src')],
15+
enforce: 'pre',
16+
});
17+
18+
config.mode = "development";
19+
config.devtool = "source-map";
20+
return config;
21+
};

0 commit comments

Comments
 (0)