@carbon/charts 1.9.0-next.1.0 → 1.9.0-next.2

package/dist/demo/utils/index.d.ts

@@ -1,2 +1,2 @@
-export { createChartSandbox, createVanillaChartApp, createAngularChartApp, createReactChartApp, createSvelteChartApp, createVueChartApp } from './sandbox';
+export { createVanillaChartApp, createAngularChartApp, createReactChartApp, createSvelteChartApp, createVueChartApp } from './sandbox';
 export { addControls, addOtherVersions, addRadioButtonEventListeners } from './story-widgets';

package/dist/demo/utils/sandbox.d.ts

@@ -1,4 +1,3 @@
-export declare const createChartSandbox: (chartTemplate: any) => string;
 export declare const createVanillaChartApp: (demo: any) => {
     'index.html': string;
     'index.js': string;
@@ -10,7 +9,7 @@ export declare const createAngularChartApp: (demo: any) => {
     'tsconfig.json': string;
     'src/index.html': string;
     'src/main.ts': string;
-    'src/global_styles.css': string;
+    'src/styles.css': string;
 };
 export declare const createReactChartApp: (demo: any) => {
     'public/index.html': string;
@@ -18,22 +17,22 @@ export declare const createReactChartApp: (demo: any) => {
     'package.json': string;
 };
 export declare const createSvelteChartApp: (demo: any) => {
-    '.codesandbox/tasks.json': string;
-    '.svelte-kit/tsconfig.json': string;
-    'src/app.html': string;
-    'src/app.d.ts': string;
-    'src/routes/+page.svelte': string;
-    'src/static/.gitkeep': string;
-    '.npmrc': string;
+    'src/App.svelte': string;
+    'src/main.ts': string;
+    'src/vite-env.d.ts': string;
+    '.stackblitzrc': string;
+    'index.html': string;
     'package.json': string;
-    'README.md': string;
-    'sandbox.config.json': string;
     'svelte.config.js': string;
     'tsconfig.json': string;
+    'tsconfig.node.json': string;
     'vite.config.ts': string;
 };
 export declare const createVueChartApp: (demo: any) => {
     'src/App.vue': string;
     'src/main.js': string;
+    '.stackblitzrc': string;
+    'index.html': string;
     'package.json': string;
+    'vite.config.js': string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts",
-  "version": "1.9.0-next.1.0",
+  "version": "1.9.0-next.2",
   "description": "Carbon Charts component library",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
@@ -58,7 +58,7 @@
     "postinstall": "carbon-telemetry collect --install",
     "file:css:charts": "sass scss/index.scss dist/styles.css --load-path=./node_modules --load-path=../../node_modules",
     "file:css:min:charts": "sass scss/index.scss dist/styles.min.css --style=compressed --load-path=./node_modules --load-path=../../node_modules",
-    "file:css:demo": "sass src/demo/styles.scss dist/demo/styles.css --load-path=./node_modules --load-path=../../node_modules",
+    "file:css:demo": "sass scss/demos.scss dist/demo/styles.css --load-path=./node_modules --load-path=../../node_modules",
     "file:downlevel:dts": "downlevel-dts dist dist",
     "postbundle": "concurrently \"yarn:file:*\"",
     "build:package": "vite build && yarn postbundle",
@@ -95,7 +95,7 @@
     "dom-to-image-more": "^3.1.6",
     "lodash-es": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1",
-    "topojson-client": "3.1.0",
+    "topojson-client": "^3.1.0",
     "tslib": "^2.5.3"
   },
   "peerDependencies": {
@@ -107,15 +107,15 @@
     "@babel/core": "^7.22.5",
     "@rushstack/eslint-patch": "^1.3.2",
     "@stackblitz/sdk": "^1.9.0",
-    "@storybook/addon-essentials": "^7.0.22",
-    "@storybook/addon-interactions": "^7.0.22",
-    "@storybook/addon-links": "^7.0.22",
-    "@storybook/blocks": "^7.0.22",
-    "@storybook/html": "^7.0.22",
-    "@storybook/html-vite": "^7.0.22",
-    "@storybook/manager-api": "^7.0.22",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.22",
+    "@storybook/addon-essentials": "^7.0.23",
+    "@storybook/addon-interactions": "^7.0.23",
+    "@storybook/addon-links": "^7.0.23",
+    "@storybook/blocks": "^7.0.23",
+    "@storybook/html": "^7.0.23",
+    "@storybook/html-vite": "^7.0.23",
+    "@storybook/manager-api": "^7.0.23",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.0.23",
     "@types/d3": "^7.4.0",
     "@types/d3-cloud": "^1.2.5",
     "@types/d3-sankey": "^0.12.1",
@@ -123,7 +123,6 @@
     "@types/topojson": "^3.2.3",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
-    "codesandbox": "^2.2.3",
     "concurrently": "^8.2.0",
     "downlevel-dts": "^0.11.0",
     "eslint": "^8.43.0",
@@ -133,8 +132,8 @@
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.63.4",
-    "storybook": "^7.0.22",
+    "sass": "^1.63.6",
+    "storybook": "^7.0.23",
     "typedoc": "^0.24.8",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
@@ -183,5 +182,5 @@
       "url": "https://github.com/theiliad"
     }
   ],
-  "gitHead": "ff0e40a2e590e52dc1a25de96508def8f7758319"
+  "gitHead": "a45e6618f25fc3b8ce7547ca4c2724d8b049175b"
 }

package/scss/_colors.scss

@@ -4,7 +4,7 @@
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/theme' as *;
 
-@import './color-palette.scss';
+@import 'color-palette';
 
 @function generateCSSCustomProperty($token, $fallback) {
 	@return var(--cds-charts-#{$token}, $fallback);

package/scss/demos.scss

@@ -0,0 +1,427 @@
+$charts-prefix: 'cc';
+
+// Variables picked up by @carbon/styles/scss/config in imports
+$prefix: 'cds'; // Default value
+$css--default-type: false; // Do not include default type
+$css--reset: false; // Do not include reset CSS
+
+// IBM Plex font for demo is loaded in .storybook/preview-head.html - don't include here
+@use '@carbon/styles/scss/config' with (
+	$css--font-face: false
+);
+@use '@carbon/styles'; // primarily needed for toolbar
+@use '@carbon/styles/scss/type' as *; // used on line 230
+
+// Custom charting tokens
+@use '@carbon/styles/scss/theme';
+@import 'tokens';
+@include theme.add-component-tokens($custom-charting-tokens);
+@import '@carbon/styles/scss/components/button/tokens.scss';
+
+@mixin default_transition { // used by colors
+	transition: all 0.1s ease-out;
+}
+@import '@carbon/colors';
+@import 'colors';
+
+@import '@carbon/import-once/scss';
+@import 'components';
+
+@import 'graphs';
+@import 'type';
+@import 'chart-holder';
+
+.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+	overflow: visible;
+}
+
+html {
+	@include styles.theme(styles.$white);
+}
+
+html[data-carbon-theme='g10'] {
+	@include styles.theme(styles.$g10);
+}
+
+html[data-carbon-theme='g90'] {
+	@include styles.theme(styles.$g90);
+}
+
+html[data-carbon-theme='g100'] {
+	@include styles.theme(styles.$g100);
+}
+
+div.container {
+	color: theme.$text-primary;
+	background-color: theme.$background;
+	font-family: 'IBM Plex Sans', Arial, sans-serif;
+	padding: 30px;
+
+	div#color-palette-picker,
+	div#projection-picker {
+		max-width: 18rem;
+		margin-top: 2rem;
+	}
+
+	#chart-demo {
+		max-width: 700px;
+	}
+
+	.cds--grid {
+		padding: 0;
+
+		.cds--row .chart-demo {
+			margin-bottom: 60px;
+		}
+	}
+
+	h3 {
+		margin: 0;
+		font-weight: 700;
+
+		b.component {
+			margin-right: 10px;
+		}
+
+		span.cds--tag.component-name {
+			font-size: 0.55em;
+			vertical-align: middle;
+			padding: 0.25em 1em;
+			border-radius: 1em;
+			font-weight: 600;
+		}
+	}
+
+	div.theme-picker {
+		margin-top: 15px;
+	}
+
+	p.props {
+		b {
+			font-weight: 700;
+		}
+	}
+
+	// Replace with Carbon .scss imports
+	div.cds--snippet--multi {
+		background-color: black;
+		color: white;
+
+		pre {
+			padding: 2em !important;
+			-moz-tab-size: 4;
+			tab-size: 4;
+			line-height: 1.4;
+		}
+
+		.cds--snippet-container pre::after {
+			display: none;
+		}
+
+		.token.tag {
+			color: #6ea6ff;
+		}
+
+		.token.attr-name {
+			color: #92eeee;
+		}
+
+		.token.attr-value {
+			color: #bb8eff;
+		}
+	}
+
+	.cds--snippet--multi .cds--snippet-container pre code {
+		font-size: 14px;
+	}
+
+	.cds--snippet--multi.cds--snippet--expand .cds--snippet-container,
+	.cds--snippet--multi.cds--snippet--expand .cds--snippet-container pre {
+		padding-bottom: 0;
+	}
+
+	div.demo-desktop-only {
+		@media screen and (max-width: 768px) {
+			position: relative;
+			overflow: hidden;
+
+			&:before {
+				content: ' ';
+				display: block;
+				position: absolute;
+				z-index: 2;
+				top: 0;
+				left: 0;
+				background: #f4f4f4;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		div.cp-message {
+			display: none;
+
+			@media screen and (max-width: 768px) {
+				position: absolute;
+				z-index: 2;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				display: block;
+				font-weight: bold;
+				text-align: center;
+			}
+		}
+	}
+
+	&.intro {
+		padding: 0;
+
+		.container-welcome {
+			padding: 0 !important;
+		}
+
+		.welcome__container {
+			width: 100vw;
+			min-height: 100vh;
+			padding: 3rem;
+			padding-bottom: 5rem;
+			background-color: #000;
+
+			@media screen and (max-width: 768px) {
+				&:before {
+					position: absolute;
+					display: block;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					background: rgba(0, 0, 0, 0.45);
+					content: ' ';
+					z-index: 1;
+				}
+			}
+		}
+
+		.welcome__content {
+			position: relative;
+			z-index: 2;
+		}
+
+		.welcome__heading {
+			@include type-style('productive-heading-07');
+
+			color: theme.$text-inverse;
+		}
+
+		.welcome__heading--subtitle {
+			font-weight: 600;
+		}
+
+		.welcome__heading--other {
+			@include type-style('productive-heading-04');
+
+			font-weight: 600;
+			color: #4587fd;
+		}
+
+		h5 {
+			margin-top: 2em;
+		}
+
+		span.netlify {
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			padding: 1em 1.5em;
+			padding-left: 3rem;
+			border-top-right-radius: 2em;
+			font-size: 13px;
+			vertical-align: middle;
+			background-color: #292929;
+			color: #bcbcbc;
+
+			a {
+				color: #fff;
+				font-weight: 700;
+			}
+		}
+	}
+
+	.marginTop {
+		margin-top: 10px;
+
+		&-15 {
+			margin-top: 15px;
+		}
+
+		&-30 {
+			margin-top: 30px;
+		}
+
+		&-45 {
+			margin-top: 45px;
+		}
+	}
+
+	hr {
+		margin-bottom: 75px;
+		margin-top: 25px;
+	}
+}
+
+.resource-card-group {
+	display: flex;
+	flex-wrap: wrap;
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: 30px;
+	max-width: 700px;
+
+	.#{$prefix}--col-md-6.#{$prefix}--col-lg-6 {
+		border: 1px solid theme.$background;
+		padding: 0;
+	}
+
+	.#{$prefix}--col-lg-6 {
+		width: 100%;
+	}
+
+	@media (min-width: 42rem) {
+		.#{$prefix}--col-md-6 {
+			display: block;
+			max-width: 75%;
+			flex: 0 0 75%;
+		}
+	}
+
+	@media (min-width: 66rem) {
+		.#{$prefix}--col-lg-6 {
+			display: block;
+			max-width: 50%;
+			flex: 0 0 50%;
+		}
+	}
+}
+
+.#{$prefix}--aspect-ratio--object {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.#{$prefix}--resource-card .#{$prefix}--tile {
+	background: theme.$layer-01;
+	height: 100%;
+	padding: 1rem 25% 1rem 1rem;
+	position: relative;
+	transition: background 70ms;
+	text-decoration: none;
+}
+
+.#{$prefix}--resource-card .#{$prefix}--tile:hover {
+	background: theme.$background-hover;
+}
+
+.#{$prefix}--resource-card__title {
+	@include type-style('productive-heading-03');
+	text-decoration: none;
+	color: theme.$text-primary;
+}
+
+.#{$prefix}--resource-card__subtitle {
+	@include type-style('heading-01');
+	font-weight: 400;
+	text-decoration: none;
+	color: theme.$text-primary;
+}
+
+.#{$prefix}--resource-card__icon--img {
+	position: absolute;
+	bottom: 1rem;
+	left: 1rem;
+	min-width: 32px;
+	min-height: 32px;
+	display: flex;
+	align-items: flex-end;
+}
+
+.#{$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper,
+.#{$prefix}--resource-card__icon--img img[src*='gif'],
+.#{$prefix}--resource-card__icon--img img[src*='svg'] {
+	margin-bottom: 0;
+}
+
+.#{$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper {
+	position: static !important; //important needed to override inline style added by Gatsby
+}
+
+.#{$prefix}--resource-card__icon--action {
+	position: absolute;
+	bottom: 1rem;
+	right: 1rem;
+	width: 20px;
+	height: 20px;
+}
+
+.#{$prefix}--resource-card .#{$prefix}--resource-card__icon--action svg {
+	fill: theme.$icon-primary;
+}
+
+// Dark
+.#{$prefix}--resource-card--dark .#{$prefix}--tile {
+	background: $gray-90; //$background for gray 90 theme
+}
+
+.#{$prefix}--resource-card--dark .#{$prefix}--tile:hover {
+	background: $gray-80; //$background-hover for gray 90 theme
+}
+
+.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__title,
+.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__subtitle {
+	color: theme.$text-on-color;
+}
+
+.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__icon--action svg {
+	fill: $gray-10;
+}
+
+// Disabled
+.#{$prefix}--resource-card--disabled .#{$prefix}--tile:hover {
+	background: theme.$layer-01;
+	cursor: not-allowed;
+}
+
+.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__title,
+.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__subtitle {
+	color: theme.$icon-on-color-disabled;
+}
+
+.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__icon--action svg {
+	fill: theme.$icon-disabled;
+}
+
+.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__icon--img {
+	filter: grayscale(100%);
+	opacity: 0.5;
+}
+
+// Disabled dark
+.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark .#{$prefix}--tile:hover {
+	background: $gray-90; //$background for gray 90 theme
+}
+
+.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
+	.#{$prefix}--resource-card__title,
+.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
+	.#{$prefix}--resource-card__subtitle {
+	color: $gray-50; //$icon-on-color-disabled for gray 90
+}
+
+.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
+	.#{$prefix}--resource-card__icon--action
+	svg {
+	fill: $gray-70; //$disabled-02 for gray 90
+}

package/scss/index.scss

@@ -9,7 +9,7 @@ $css--reset: false; // Do not include reset CSS
 
 // Custom charting tokens
 @use '@carbon/styles/scss/theme' as theme;
-@import './tokens';
+@import 'tokens';
 @include theme.add-component-tokens($custom-charting-tokens);
 @import '@carbon/styles/scss/components/button/tokens';
 
@@ -17,14 +17,14 @@ $css--reset: false; // Do not include reset CSS
 	transition: all 0.1s ease-out;
 }
 @import '@carbon/colors';
-@import './colors'; // mixins, color palette, color maps, tooltip and legend color settings
+@import 'colors'; // mixins, color palette, color maps, tooltip and legend color settings
 
 @import '@carbon/import-once/scss'; // exports mixin
-@import './components'; // use exports mixin to ensure component modules only loaded once
+@import 'components'; // use exports mixin to ensure component modules only loaded once
 
-@import './graphs'; // chart-specific
-@import './type'; // font size, fill, color, weight (but not family)
-@import './chart-holder'; // container settings
+@import 'graphs'; // chart-specific
+@import 'type'; // font size, fill, color, weight (but not family)
+@import 'chart-holder'; // container settings
 
 .#{$prefix}--#{$charts-prefix}--chart-wrapper {
 	overflow: visible;