@instructure/outcomes-ui 2.1.9 → 3.0.0

package/es/translated/sv/components/OutcomeTray/index.js

@@ -5,32 +5,25 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { Flex } from '@instructure/ui-flex';
 import { Modal } from '@instructure/ui-modal';
-import { themeable } from '@instructure/ui-themeable';
 import { View } from '@instructure/ui-view';
 import { Tray } from '@instructure/ui-tray';
 import { Spinner } from '@instructure/ui-spinner';
+import { withStyle, jsx } from '@instructure/emotion';
 import OutcomeList from "./OutcomeList/index.js";
 import SearchInput from "../SearchInput/index.js";
 import SearchResults from "../SearchResults/index.js";
-import theme from "../theme.js";
-var styles = {
-  componentId: 'fPfsV',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeTray--outcomeTray {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  min-height: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.outcomes-ui__OutcomeTray--trayContainer {\n  padding: 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  min-height: 0;\n}\n\n.outcomes-ui__OutcomeTray--footerContainer {\n  bottom: 0;\n  position: sticky;\n}\n";
-  },
-  'outcomeTray': 'outcomes-ui__OutcomeTray--outcomeTray',
-  'trayContainer': 'outcomes-ui__OutcomeTray--trayContainer',
-  'footerContainer': 'outcomes-ui__OutcomeTray--footerContainer'
-};
-import { outcomeShape } from "../../store/shapes.js";
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
+import { outcomeShape, stylesShape } from "../../store/shapes.js";
 var ModalFooter = Modal.Footer;
-var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomeTray, _React$Component);
 
   var _super = _createSuper(OutcomeTray);
@@ -71,10 +64,10 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
           listTotal = _this$props2.listTotal,
           getOutcomesList = _this$props2.getOutcomesList,
           features = _this$props2.features;
-      return /*#__PURE__*/React.createElement(View, {
+      return jsx(View, {
         display: "block",
         padding: "small none none none"
-      }, /*#__PURE__*/React.createElement(OutcomeList, {
+      }, jsx(OutcomeList, {
         outcomes: outcomes,
         isOutcomeSelected: isOutcomeSelected,
         selectOutcomeIds: selectOutcomeIds,
@@ -102,7 +95,7 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
           searchTotal = _this$props3.searchTotal,
           selectOutcomeIds = _this$props3.selectOutcomeIds,
           deselectOutcomeIds = _this$props3.deselectOutcomeIds;
-      return /*#__PURE__*/React.createElement(SearchResults, {
+      return jsx(SearchResults, {
         screenreaderNotification: screenreaderNotification,
         setSearchLoading: setSearchLoading,
         setSearchEntries: setSearchEntries,
@@ -125,11 +118,11 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
           isFetching = _this$props4.isFetching;
 
       if (isFetching) {
-        return /*#__PURE__*/React.createElement(Flex, {
+        return jsx(Flex, {
           justifyItems: "center"
-        }, /*#__PURE__*/React.createElement(Flex.Item, {
+        }, jsx(Flex.Item, {
           padding: "small"
-        }, /*#__PURE__*/React.createElement(Spinner, {
+        }, jsx(Spinner, {
           renderTitle: "L\xE4ser in"
         })));
       }
@@ -158,15 +151,14 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       var _this2 = this;
 
       var closeOutcomePicker = this.props.closeOutcomePicker;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.footerContainer
-      }, /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+      return jsx("div", {
+        css: this.props.styles.footerContainer
+      }, jsx(ModalFooter, null, jsx(Button, {
         margin: "xxx-small",
-        variant: "default",
         onClick: closeOutcomePicker
-      }, "Avbryt"), /*#__PURE__*/React.createElement(Button, {
+      }, "Avbryt"), jsx(Button, {
         margin: "xxx-small",
-        variant: "primary",
+        color: "primary",
         onClick: function onClick() {
           return _this2.handleSubmit();
         }
@@ -189,28 +181,29 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         placement: placement,
         size: size
       };
-      return /*#__PURE__*/React.createElement(Tray, Object.assign({
+      return jsx(Tray, Object.assign({
         "data-automation": "outcomeTrayPicker__view",
         liveRegion: liveRegion,
         mountNode: mountNode,
         open: isOpen,
         onExiting: resetOutcomePicker,
         label: "Koppla l\xE4randem\xE5l"
-      }, trayProps), /*#__PURE__*/React.createElement("div", {
-        className: styles.outcomeTray
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.trayContainer
-      }, /*#__PURE__*/React.createElement(Flex, {
+      }, trayProps), jsx("div", {
+        css: this.props.styles.outcomeTray
+      }, jsx("div", {
+        css: this.props.styles.trayContainer
+      }, jsx(Flex, {
         margin: "none none small none"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         shouldGrow: true,
         shouldShrink: true
-      }, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(Heading, {
         level: "h3",
         margin: "0 0 x-small"
-      }, "Koppla l\xE4randem\xE5l")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-        onClick: closeOutcomePicker
-      }, "Avbryt"))), /*#__PURE__*/React.createElement(SearchInput, {
+      }, "Koppla l\xE4randem\xE5l")), jsx(Flex.Item, null, jsx(CloseButton, {
+        onClick: closeOutcomePicker,
+        screenReaderLabel: "Avbryt"
+      }))), jsx(SearchInput, {
         onChange: function onChange(_, value) {
           return updateSearchText(value);
         },
@@ -261,7 +254,8 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   shouldModifyArtifact: PropTypes.bool,
   scope: PropTypes.string.isRequired,
   showAlert: PropTypes.func,
-  features: PropTypes.array
+  features: PropTypes.array,
+  styles: stylesShape
 }, _class2.defaultProps = {
   screenreaderNotification: null,
   liveRegion: null,

package/es/translated/sv/components/OutcomeTray/styles.js

@@ -0,0 +1,27 @@
+var generateStyle = function generateStyle() {
+  return {
+    outcomeTray: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1,
+      minHeight: '0',
+      position: 'absolute',
+      top: '0',
+      bottom: '0',
+      left: '0',
+      right: '0'
+    },
+    trayContainer: {
+      padding: '1rem',
+      flexGrow: 1,
+      overflow: 'auto',
+      minHeight: '0'
+    },
+    footerContainer: {
+      bottom: '0',
+      position: 'sticky'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/sv/components/OutcomeTree/TreeBrowser/__tests__/index.test.js

@@ -46,18 +46,20 @@ describe('TreeBrowser', function () {
 
   it('renders a TreeBrowser component', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps()));
-    expect(wrapper.find('TreeBrowser')).to.have.length(1);
+    expect(wrapper.find(TreeBrowser)).to.have.length(1);
   });
   it('does not require a set of rootOutcomeIds', function () {
-    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps()));
-    expect(wrapper.find('TreeButton')).to.have.length(3);
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps())); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    expect(wrapper.find('TreeButton')).to.have.length(6);
   });
   it('does not render a Home directory if only existing root is a collection', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps({
       rootOutcomeIds: [1],
       collections: collectionsWithRoot([1])
-    })));
-    expect(wrapper.find('TreeButton')).to.have.length(2);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    expect(wrapper.find('TreeButton')).to.have.length(4);
     expect(wrapper.find('TreeButton').at(0).text()).to.include('Collectiony Collectionface');
   });
   it('renders a Home directory if only existing root is not a collection', function () {
@@ -65,8 +67,9 @@ describe('TreeBrowser', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps({
       rootOutcomeIds: rootIds,
       collections: collectionsWithRoot(rootIds, [])
-    })));
-    expect(wrapper.find('TreeButton')).to.have.length(1);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    expect(wrapper.find('TreeButton')).to.have.length(2);
     expect(wrapper.find('TreeButton').at(0).text()).to.include('Home');
   });
   it('does not render Home level if all roots are collections', function () {
@@ -74,8 +77,9 @@ describe('TreeBrowser', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps({
       rootOutcomeIds: rootIds,
       collections: collectionsWithRoot(rootIds)
-    })));
-    expect(wrapper.find('TreeButton')).to.have.length(2);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    expect(wrapper.find('TreeButton')).to.have.length(4);
   });
   it('passes children of root collections', function () {
     var rootIds = ['1', '2'];
@@ -83,8 +87,9 @@ describe('TreeBrowser', function () {
       rootOutcomeIds: rootIds,
       collections: collectionsWithRoot(rootIds),
       expandedIds: ['1']
-    })));
-    expect(wrapper.find('TreeButton')).to.have.length(3);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    expect(wrapper.find('TreeButton')).to.have.length(6);
   });
   it('can expand non-root collections', function () {
     var collections = {
@@ -119,8 +124,9 @@ describe('TreeBrowser', function () {
       rootOutcomeIds: rootIds,
       collections: collections,
       expandedIds: ['2', '3']
-    })));
-    expect(wrapper.find('TreeButton')).to.have.length(4);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    expect(wrapper.find('TreeButton')).to.have.length(8);
   });
   it('does not render if collections are undefined', function () {
     var props = makeProps({

package/es/translated/sv/components/OutcomeTree/__tests__/index.test.js

@@ -4,17 +4,15 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow, mount } from 'enzyme';
 import OutcomeTree from "../index.js";
-var styles = {
-  componentId: 'bkdMu',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeTree--outcomeTree {\n  overflow: scroll;\n  height: 100%;\n}\n\n.outcomes-ui__OutcomeTree--outcomeContent {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: scroll;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection {\n  padding-bottom: 1rem;\n  padding-left: 1rem;\n  padding-top: 1rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p:last-child {\n    margin-bottom: 0\n  }\n";
-  },
-  'outcomeTree': 'outcomes-ui__OutcomeTree--outcomeTree',
-  'outcomeContent': 'outcomes-ui__OutcomeTree--outcomeContent',
-  'selectedOutcomeCollection': 'outcomes-ui__OutcomeTree--selectedOutcomeCollection',
-  'outcomeDescription': 'outcomes-ui__OutcomeTree--outcomeDescription'
-};
+import styles from "../styles.js";
 import checkA11y from "../../../test/checkA11y.js";
+import OutcomeBrowser from "../TreeBrowser/index.js";
+import OutcomeSelectionList from "../../OutcomeSelectionList/index.js";
+import OutcomeFolderList from "../../OutcomeFolderList/index.js";
+import { Text } from '@instructure/ui-text';
+import { Heading } from '@instructure/ui-heading';
+import { Billboard } from '@instructure/ui-billboard';
+import { findElementsWithStyle } from "../../../util/__tests__/findElementsWithStyle.js";
 describe('OutcomeTree', function () {
   var outcomeData = {
     label: 'FOO',
@@ -66,40 +64,40 @@ describe('OutcomeTree', function () {
 
   it('passes the correct params to OutcomeBrowser', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, props), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('OutcomeBrowser')).to.have.length(1);
-    expect(wrapper.find('OutcomeBrowser').prop('collections')).to.deep.equal(props.collections);
-    expect(wrapper.find('OutcomeBrowser').prop('rootOutcomeIds')).to.deep.equal(props.rootOutcomeIds);
-    expect(wrapper.find('OutcomeBrowser').prop('expandedIds')).to.deep.equal(props.expandedIds);
+    expect(wrapper.find(OutcomeBrowser)).to.have.length(1);
+    expect(wrapper.find(OutcomeBrowser).prop('collections')).to.deep.equal(props.collections);
+    expect(wrapper.find(OutcomeBrowser).prop('rootOutcomeIds')).to.deep.equal(props.rootOutcomeIds);
+    expect(wrapper.find(OutcomeBrowser).prop('expandedIds')).to.deep.equal(props.expandedIds);
   });
   it('wraps the browser with the proper CSS styling', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find(".".concat(styles.outcomeTree)).exists()).to.equal(true);
+    expect(findElementsWithStyle(wrapper, styles().outcomeTree).exists()).to.equal(true);
   });
   it('passes correct params to OutcomeSelectionList component', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('OutcomeSelectionList').prop('outcomes')).to.deep.equal(nonGroups);
+    expect(wrapper.find(OutcomeSelectionList).prop('outcomes')).to.deep.equal(nonGroups);
   });
   it('passes correct params to OutcomeFolderList component', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, props), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('OutcomeFolderList').prop('outcomes')).to.deep.equal(groups);
-    expect(wrapper.find('OutcomeFolderList').prop('activeCollectionId')).to.deep.equal(props.activeCollection.id);
+    expect(wrapper.find(OutcomeFolderList).prop('outcomes')).to.deep.equal(groups);
+    expect(wrapper.find(OutcomeFolderList).prop('activeCollectionId')).to.deep.equal(props.activeCollection.id);
   });
   it('passes correct params to the Text components', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
       disableLifecycleMethods: true
     });
-    var texts = wrapper.find('Text');
-    var header = wrapper.find('Heading');
+    var texts = wrapper.find(Text);
+    var header = wrapper.find(Heading);
     expect(texts.at(0).render().text()).to.equal('1 outcome');
     expect(texts.at(1).render().text()).to.equal('This is the description');
     expect(header.at(0).render().text()).to.equal('Outcome group');
@@ -111,29 +109,29 @@ describe('OutcomeTree', function () {
     expect(wrapper.html()).to.include('</blink>');
   });
   it('sets the CSS styling when there is a description', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find(".".concat(styles.outcomeDescription)).exists()).to.equal(true);
+    expect(wrapper.find('.outcomeTreeOutcomeDescription').exists()).to.equal(true);
   });
   it('shows the proper billboard when there are no active collection details', function () {
     var props = makeProps({
       activeCollection: {}
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, props), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Billboard')).to.have.length(1);
-    expect(wrapper.find('Billboard').prop('heading')).to.equal('Align Outcomes');
+    expect(wrapper.find(Billboard)).to.have.length(1);
+    expect(wrapper.find(Billboard).prop('heading')).to.equal('Align Outcomes');
   });
   it('shows the proper billboard when there is no active collection id', function () {
     var props = makeProps();
     delete props.activeCollection.id;
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, props), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Billboard')).to.have.length(1);
-    expect(wrapper.find('Billboard').prop('heading')).to.equal('Align Outcomes');
+    expect(wrapper.find(Billboard)).to.have.length(1);
+    expect(wrapper.find(Billboard).prop('heading')).to.equal('Align Outcomes');
   });
   it('does not set the CSS description styling when there are no active collection details', function () {
     var props = makeProps({
@@ -148,10 +146,10 @@ describe('OutcomeTree', function () {
     var props = makeProps({
       activeCollection: {}
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, props), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find(".".concat(styles.outcomeContent)).exists()).to.equal(true);
+    expect(findElementsWithStyle(wrapper, styles().outcomeContent).exists()).to.equal(true);
   });
   it('handles missing activeCollection props', function () {
     var props = makeProps();

package/es/translated/sv/components/OutcomeTree/index.js

@@ -5,10 +5,11 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import themeable from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { Billboard } from '@instructure/ui-billboard';
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
@@ -18,95 +19,87 @@ import OutcomeFolderList from "../OutcomeFolderList/index.js";
 import TreeBrowser from "./TreeBrowser/index.js";
 
 var AlignOutcomes = function AlignOutcomes(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return jsx("svg", Object.assign({
     width: "120",
     height: "87",
     viewBox: "0 0 120 87",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("title", null, "Align-Outcomes"), /*#__PURE__*/React.createElement("g", {
+  }, props), jsx("title", null, "Align-Outcomes"), jsx("g", {
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     d: "M77.383 16.062a6.636 6.636 0 0 0 .604-2.762 6.667 6.667 0 0 0-4.204-6.193c.012-.142.022-.286.022-.431a4.958 4.958 0 0 0-4.958-4.958 4.927 4.927 0 0 0-2.898.94A11.87 11.87 0 0 0 59.881 1c-4.753 0-8.856 2.779-10.776 6.8a7.219 7.219 0 0 0-2.983-.648c-4 0-7.243 3.243-7.243 7.243 0 .574.074 1.13.201 1.667h38.303z",
     fill: "#FFF"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M77.383 16.062a6.636 6.636 0 0 0 .604-2.762 6.667 6.667 0 0 0-4.204-6.193c.012-.142.022-.286.022-.431a4.958 4.958 0 0 0-4.958-4.958 4.927 4.927 0 0 0-2.898.94A11.87 11.87 0 0 0 59.881 1c-4.753 0-8.856 2.779-10.776 6.8a7.219 7.219 0 0 0-2.983-.648c-4 0-7.243 3.243-7.243 7.243 0 .574.074 1.13.201 1.667h38.303z",
     stroke: "#CED3D7",
     strokeWidth: "2",
     strokeLinecap: "round"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M118.39 23.614c.015-.228.025-.457.025-.688 0-5.703-4.623-10.327-10.326-10.327-1.913 0-3.704.523-5.24 1.43a7.675 7.675 0 0 0-14.68 2.219 6.02 6.02 0 0 0-.936-.08 5.992 5.992 0 0 0-5.992 5.992c0 .502.07.988.185 1.454h36.964z",
     fill: "#FFF"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M118.39 23.614c.015-.228.025-.457.025-.688 0-5.703-4.623-10.327-10.326-10.327-1.913 0-3.704.523-5.24 1.43a7.675 7.675 0 0 0-14.68 2.219 6.02 6.02 0 0 0-.936-.08 5.992 5.992 0 0 0-5.992 5.992c0 .502.07.988.185 1.454h36.964z",
     stroke: "#CED3D7",
     strokeWidth: "2",
     strokeLinecap: "round"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M84.402 85.735a3.82 3.82 0 0 1-3.174-1.685L57.064 48.29 32.901 84.05a3.827 3.827 0 1 1-6.34-4.284l30.503-45.148L87.57 79.766a3.827 3.827 0 0 1-3.167 5.97",
     fill: "#E5E8EA"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M84.402 85.735a3.82 3.82 0 0 1-3.174-1.685L57.064 48.29 32.901 84.05a3.827 3.827 0 1 1-6.34-4.284l30.503-45.148L87.57 79.766a3.827 3.827 0 0 1-3.167 5.97z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M84.398 50.201c0 15.096-12.238 27.334-27.334 27.334S29.73 65.297 29.73 50.201s12.238-27.334 27.334-27.334 27.334 12.238 27.334 27.334",
     fill: "#FFF"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M84.398 50.201c0 15.096-12.238 27.334-27.334 27.334S29.73 65.297 29.73 50.201s12.238-27.334 27.334-27.334 27.334 12.238 27.334 27.334z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M77.291 50.201c0 11.171-9.055 20.227-20.226 20.227s-20.227-9.056-20.227-20.227c0-11.17 9.056-20.227 20.227-20.227 11.17 0 20.227 9.056 20.227 20.227",
     fill: "#F1060F"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M77.291 50.201c0 11.171-9.055 20.227-20.226 20.227s-20.227-9.056-20.227-20.227c0-11.17 9.056-20.227 20.227-20.227 11.17 0 20.227 9.056 20.227 20.227z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M70.185 50.201c0 7.246-5.874 13.12-13.12 13.12-7.246 0-13.121-5.874-13.121-13.12 0-7.246 5.875-13.12 13.12-13.12 7.247 0 13.12 5.874 13.12 13.12",
     fill: "#FFF"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M70.185 50.201c0 7.246-5.874 13.12-13.12 13.12-7.246 0-13.121-5.874-13.121-13.12 0-7.246 5.875-13.12 13.12-13.12 7.247 0 13.12 5.874 13.12 13.12z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M63.625 50.201a6.56 6.56 0 1 1-13.12 0 6.56 6.56 0 0 1 13.12 0",
     fill: "#F1060F"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M63.625 50.201a6.56 6.56 0 1 1-13.12 0 6.56 6.56 0 0 1 13.12 0z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M42.855 23.346a8.598 8.598 0 0 0 .857-3.736 8.655 8.655 0 0 0-8.654-8.654c-4.003 0-7.361 2.72-8.35 6.41a8.657 8.657 0 0 0-2.548-.532l.002-.027A8.344 8.344 0 0 0 8.12 13.59C4.074 14.314 1 17.845 1 22.1c0 .424.04.837.1 1.245h41.755z",
     fill: "#FFF"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M42.855 23.346a8.598 8.598 0 0 0 .857-3.736 8.655 8.655 0 0 0-8.654-8.654c-4.003 0-7.361 2.72-8.35 6.41a8.657 8.657 0 0 0-2.548-.532l.002-.027A8.344 8.344 0 0 0 8.12 13.59C4.074 14.314 1 17.845 1 22.1c0 .424.04.837.1 1.245h41.755z",
     stroke: "#CED3D7",
     strokeWidth: "2",
     strokeLinecap: "round"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     fill: "#3F5463",
     d: "M64.635 43.022V15.576l10.02 10.021 14.62-14.619 7.404 7.403-14.62 14.62 10.023 10.021z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M89.275 8.857l-2.12 2.12-12.499 12.499-6.4-6.4-5.122-5.121v32.568h32.568L90.58 39.4l-6.4-6.4 12.498-12.498 2.122-2.121-2.122-2.122-5.282-5.282-2.12-2.121zm0 4.243l5.282 5.282L79.938 33l8.521 8.522H66.134V19.197l8.522 8.522 14.62-14.62z",
     fill: "#FFF"
   })));
 };
 
-import theme from "../theme.js";
-var styles = {
-  componentId: 'bkdMu',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeTree--outcomeTree {\n  overflow: scroll;\n  height: 100%;\n}\n\n.outcomes-ui__OutcomeTree--outcomeContent {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: scroll;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection {\n  padding-bottom: 1rem;\n  padding-left: 1rem;\n  padding-top: 1rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p:last-child {\n    margin-bottom: 0\n  }\n";
-  },
-  'outcomeTree': 'outcomes-ui__OutcomeTree--outcomeTree',
-  'outcomeContent': 'outcomes-ui__OutcomeTree--outcomeContent',
-  'selectedOutcomeCollection': 'outcomes-ui__OutcomeTree--selectedOutcomeCollection',
-  'outcomeDescription': 'outcomes-ui__OutcomeTree--outcomeDescription'
-};
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
 import { sanitizeHtml } from "../../lib/sanitize.js";
-var OutcomeTree = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { stylesShape } from "../../store/shapes.js";
+var OutcomeTree = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomeTree, _React$Component);
 
   var _super = _createSuper(OutcomeTree);
@@ -142,29 +135,30 @@ var OutcomeTree = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     key: "renderActiveCollection",
     value: function renderActiveCollection() {
       var activeCollection = this.props.activeCollection;
-      return activeCollection && activeCollection.id ? /*#__PURE__*/React.createElement("div", {
-        className: styles.selectedOutcomeCollection
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      return activeCollection && activeCollection.id ? jsx("div", {
+        css: this.props.styles.selectedOutcomeCollection
+      }, jsx("div", null, jsx(Heading, {
         level: "h3",
         as: "h2",
         margin: "0 0 x-small"
-      }, activeCollection.header)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      }, activeCollection.header)), jsx("div", null, jsx(Text, {
         size: "x-small"
-      }, activeCollection.summary)), /*#__PURE__*/React.createElement(Text, {
+      }, activeCollection.summary)), jsx(Text, {
         size: "x-small"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.outcomeDescription,
+      }, jsx("div", {
+        css: this.props.styles.outcomeDescription,
+        className: "outcomeTreeOutcomeDescription",
         dangerouslySetInnerHTML: {
           // eslint-disable-line react/no-danger
           __html: sanitizeHtml(activeCollection.description)
         }
-      }))) : /*#__PURE__*/React.createElement(Billboard, {
+      }))) : jsx(Billboard, {
         message: "Bl\xE4ddra bland dina l\xE4randem\xE5l i gruppmapparna.",
         heading: "Koppla l\xE4randem\xE5l",
         headingAs: "h3",
         headingLevel: "h3",
         size: "small",
-        hero: /*#__PURE__*/React.createElement(AlignOutcomes, null),
+        hero: jsx(AlignOutcomes, null),
         margin: "medium"
       });
     }
@@ -188,46 +182,46 @@ var OutcomeTree = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
           expandedIds = _this$props.expandedIds;
       var groups = activeChildren.groups,
           nonGroups = activeChildren.nonGroups;
-      return /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Flex, {
         alignItems: "stretch",
         height: "100%",
         width: "100%"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         width: "30%"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.outcomeTree,
+      }, jsx("div", {
+        css: this.props.styles.outcomeTree,
         "data-automation": "outcomePicker__outcomeTree"
-      }, /*#__PURE__*/React.createElement(TreeBrowser, {
+      }, jsx(TreeBrowser, {
         collections: collections,
         setActiveCollection: setActiveCollection,
         rootOutcomeIds: rootOutcomeIds,
         expandedIds: expandedIds,
         toggleExpandedIds: toggleExpandedIds
-      }))), /*#__PURE__*/React.createElement(Flex.Item, {
+      }))), jsx(Flex.Item, {
         size: "0",
         shouldGrow: true,
         display: "flex",
         borderWidth: "0 0 0 small"
-      }, /*#__PURE__*/React.createElement(Flex, {
+      }, jsx(Flex, {
         height: "100%",
         width: "100%",
         direction: "column",
         alignItems: "stretch",
-        className: styles.outcomeContent,
+        css: this.props.styles.outcomeContent,
         elementRef: function elementRef(rhs) {
           return _this.setRHS(rhs);
         },
         "data-automation": "outcomePicker__outcomeContent"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         size: "0",
         shouldGrow: true
-      }, this.renderActiveCollection(), /*#__PURE__*/React.createElement(OutcomeSelectionList, {
+      }, this.renderActiveCollection(), jsx(OutcomeSelectionList, {
         setFocusedOutcome: setFocusedOutcome,
         outcomes: nonGroups,
         isOutcomeSelected: isOutcomeSelected,
         selectOutcomeIds: selectOutcomeIds,
         deselectOutcomeIds: deselectOutcomeIds
-      }), /*#__PURE__*/React.createElement(OutcomeFolderList, {
+      }), jsx(OutcomeFolderList, {
         outcomes: groups,
         setActiveCollection: setActiveCollection,
         getOutcomeSummary: getOutcomeSummary,
@@ -259,7 +253,8 @@ var OutcomeTree = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     header: PropTypes.string,
     summary: PropTypes.string,
     description: PropTypes.string
-  })
+  }),
+  styles: stylesShape
 }, _class2.defaultProps = {
   expandedIds: null,
   activeCollection: null,