From 2bfbcb643a8f9c931a142894d53bbe78ca0fb15d Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Fri, 29 Jan 2021 10:01:10 +0000
Subject: [PATCH] chore: update addon to match current release

---
 .../storybook-addon-carbon-theme/README.md    | 91 +++++++++++++++----
 .../storybook-addon-carbon-theme/package.json |  2 +-
 2 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/packages/storybook-addon-carbon-theme/README.md b/packages/storybook-addon-carbon-theme/README.md
index 80ec85bb0728..840a13faadc4 100644
--- a/packages/storybook-addon-carbon-theme/README.md
+++ b/packages/storybook-addon-carbon-theme/README.md
@@ -1,22 +1,23 @@
-# @carbon/storybook-addon-theme
+# Storybook addon for Carbon themes
 
-> Carbon theme switcher for Storybook
+This addon for storybook allows you to change the theme used with Carbon
+Components!
 
-## Getting started
+## Supports
 
-To install `@carbon/storybook-addon-theme` in your project, you will need to run
-the following command using [npm](https://www.npmjs.com/):
+- React
+- Vue
 
-```bash
-npm install -S @carbon/storybook-addon-theme
+## Install
+
+```sh
+npm install @carbon/storybook-addon-theme
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
-instead:
+## Requirements
 
-```bash
-yarn add @carbon/storybook-addon-theme
-```
+- Use of Carbon Components
+- Use of Custom CSS Properties feature flag
 
 ## Usage
 
@@ -24,7 +25,7 @@ yarn add @carbon/storybook-addon-theme
 
 ```js
 module.exports = {
-  addons: ['@carbon/storyboook-addon-theme'],
+  addons: ['@carbon/storybook-addon-theme/register'],
 };
 ```
 
@@ -36,7 +37,7 @@ const addons = [
 ];
 
 if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
-  addons.push('@carbon/storybook-addon-theme');
+  addons.push('@carbon/storybook-addon-theme/register');
 }
 
 module.exports = {
@@ -47,17 +48,33 @@ module.exports = {
 
 ### Global Decorator
 
+`.storybook/preview.js`:
+
 ```js
 import { withCarbonTheme } from '@carbon/storybook-addon-theme'; // for React
 // import { withCarbonTheme } from '@carbon/storybook-addon-theme/vue'; // for Vue
-// for Angular
-// .
+// for Angular (not yet supported)
 // .
+// for all (including story decorators)
+import index from './index.scss';
 // .
 addDecorator(withCarbonTheme);
 // .
-// .
-// .
+```
+
+```js
+// Adding the decorator
+const decorators = [withCarbonTheme];
+const parameters = {
+  carbonTheme: {
+    theme: 'g10',
+  },
+};
+export { decorators, parameters };
+```
+
+```js
+// Older storybook versions
 addParameters({
   // optional
   carbonTheme: {
@@ -67,7 +84,7 @@ addParameters({
 });
 ```
 
-within your stories:
+### Story decorator
 
 ```js
 import { withCarbonTheme } from '@carbon/storybook-addon-theme'; // for React
@@ -87,6 +104,42 @@ storiesOf('Component', module)
   });
 ```
 
+## SCSS
+
+`.storybook/index.scss`
+
+```scss
+@import '@carbon/themes/scss/themes';
+
+:root {
+  @include carbon--theme(
+    $theme: $carbon--theme--white,
+    $emit-custom-properties: true
+  );
+}
+
+:root[storybook-carbon-theme='g10'] {
+  @include carbon--theme(
+    $theme: $carbon--theme--g10,
+    $emit-custom-properties: true
+  );
+}
+
+:root[storybook-carbon-theme='g90'] {
+  @include carbon--theme(
+    $theme: $carbon--theme--g90,
+    $emit-custom-properties: true
+  );
+}
+
+:root[storybook-carbon-theme='g100'] {
+  @include carbon--theme(
+    $theme: $carbon--theme--g100,
+    $emit-custom-properties: true
+  );
+}
+```
+
 ## 🙌 Contributing
 
 We're always looking for contributors to help us fix bugs, build new features,
diff --git a/packages/storybook-addon-carbon-theme/package.json b/packages/storybook-addon-carbon-theme/package.json
index 45c2439d71dd..ebf0a6eac879 100644
--- a/packages/storybook-addon-carbon-theme/package.json
+++ b/packages/storybook-addon-carbon-theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/storybook-addon-theme",
   "description": "Carbon theme switcher for Storybook",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "main": "dist/react.js",
   "repository": {