@khanacademy/wonder-blocks-toolbar 2.1.35 → 2.1.36

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-toolbar
 
+## 2.1.36
+
+### Patch Changes
+
+-   f3bcc1a9: Modify layout to be more flexible
+
 ## 2.1.35
 
 ### Patch Changes

package/dist/es/index.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import Color from '@khanacademy/wonder-blocks-color';
 import { View } from '@khanacademy/wonder-blocks-core';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { LabelSmall, LabelLarge, HeadingSmall } from '@khanacademy/wonder-blocks-typography';
 
 class Toolbar extends React.Component {
@@ -18,22 +19,18 @@ class Toolbar extends React.Component {
     return React.createElement(View, {
       style: [sharedStyles.container, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
     }, React.createElement(View, {
-      style: sharedStyles.column
-    }, React.createElement(View, {
-      style: sharedStyles.leftColumn
-    }, leftContent)), title && React.createElement(View, {
+      style: [sharedStyles.column, sharedStyles.leftColumn, title ? sharedStyles.withTitle : null]
+    }, leftContent), title && React.createElement(View, {
       style: [sharedStyles.column, sharedStyles.wideColumn]
     }, React.createElement(View, {
-      style: [sharedStyles.titles, sharedStyles.verticalAlign, sharedStyles.center]
+      style: [sharedStyles.titles, sharedStyles.center]
     }, React.createElement(TitleComponent, {
       id: "wb-toolbar-title"
     }, title), subtitle && React.createElement(LabelSmall, {
       style: color === "light" && sharedStyles.subtitle
     }, subtitle))), React.createElement(View, {
-      style: sharedStyles.column
-    }, React.createElement(View, {
-      style: sharedStyles.rightColumn
-    }, rightContent)));
+      style: [sharedStyles.column, sharedStyles.rightColumn, title ? sharedStyles.withTitle : null]
+    }, rightContent));
   }
 
 }
@@ -45,13 +42,13 @@ Toolbar.defaultProps = {
 };
 const sharedStyles = StyleSheet.create({
   container: {
-    border: "1px solid rgba(33, 36, 44, 0.16)",
-    display: "flex",
+    border: `1px solid ${Color.offBlack16}`,
+    flex: 1,
     flexDirection: "row",
+    justifyContent: "space-between",
     minHeight: 66,
-    paddingLeft: 16,
-    paddingRight: 16,
-    position: "relative",
+    paddingLeft: Spacing.medium_16,
+    paddingRight: Spacing.medium_16,
     width: "100%"
   },
   small: {
@@ -59,22 +56,23 @@ const sharedStyles = StyleSheet.create({
   },
   dark: {
     backgroundColor: Color.darkBlue,
-    boxShadow: "0 1px 0 0 rgba(255, 255, 255, 0.64)",
+    boxShadow: `0 1px 0 0 ${Color.white64}`,
     color: "white"
   },
-  verticalAlign: {
-    justifyContent: "center"
-  },
   column: {
-    flex: 1,
     justifyContent: "center"
   },
+  withTitle: {
+    flex: 1
+  },
   wideColumn: {
+    flex: 1,
     flexBasis: "50%"
   },
   leftColumn: {
     alignItems: "center",
     flexDirection: "row",
+    flexShrink: 0,
     justifyContent: "flex-start"
   },
   rightColumn: {
@@ -86,10 +84,10 @@ const sharedStyles = StyleSheet.create({
     textAlign: "center"
   },
   subtitle: {
-    color: "rgba(33, 36, 44, 0.64)"
+    color: Color.offBlack64
   },
   titles: {
-    padding: 12
+    padding: Spacing.small_12
   }
 });
 

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 6);
+/******/ 	return __webpack_require__(__webpack_require__.s = 7);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -101,24 +101,38 @@ module.exports = require("@khanacademy/wonder-blocks-core");
 /* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-typography");
+module.exports = require("@khanacademy/wonder-blocks-color");
 
 /***/ }),
 /* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-spacing");
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-typography");
+
+/***/ }),
+/* 5 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Toolbar; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__);
 /*
  * A toolbar component that often acts as a container header.
  */
@@ -127,6 +141,25 @@ module.exports = require("@khanacademy/wonder-blocks-typography");
 
 
 
+
+
+/**
+ * The `Toolbar` component is a generic toolbar wrapper that exposes
+ * customization options. An optional `title` and `subtitle` property can be
+ * used along with left and right content passed as props.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import Toolbar from "@khanacademy/wonder-blocks-toolbar";
+ *
+ * <Toolbar
+ *   size="small"
+ *   leftContent={<IconButton icon={icons.dismiss} kind="tertiary" />}
+ *   rightContent={<Button>Next Video</Button>}
+ * />
+ * ```
+ */
 class Toolbar extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {
     const {
@@ -137,26 +170,22 @@ class Toolbar extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       subtitle,
       title
     } = this.props;
-    const TitleComponent = subtitle ? _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelLarge"] : _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["HeadingSmall"];
+    const TitleComponent = subtitle ? _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelLarge"] : _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["HeadingSmall"];
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
       style: [sharedStyles.container, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: sharedStyles.column
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: sharedStyles.leftColumn
-    }, leftContent)), title && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: [sharedStyles.column, sharedStyles.leftColumn, title ? sharedStyles.withTitle : null]
+    }, leftContent), title && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
       style: [sharedStyles.column, sharedStyles.wideColumn]
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: [sharedStyles.titles, sharedStyles.verticalAlign, sharedStyles.center]
+      style: [sharedStyles.titles, sharedStyles.center]
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](TitleComponent, {
       id: "wb-toolbar-title"
-    }, title), subtitle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
+    }, title), subtitle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelSmall"], {
       style: color === "light" && sharedStyles.subtitle
     }, subtitle))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: sharedStyles.column
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: sharedStyles.rightColumn
-    }, rightContent)));
+      style: [sharedStyles.column, sharedStyles.rightColumn, title ? sharedStyles.withTitle : null]
+    }, rightContent));
   }
 
 }
@@ -168,13 +197,13 @@ Toolbar.defaultProps = {
 };
 const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   container: {
-    border: "1px solid rgba(33, 36, 44, 0.16)",
-    display: "flex",
+    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`,
+    flex: 1,
     flexDirection: "row",
+    justifyContent: "space-between",
     minHeight: 66,
-    paddingLeft: 16,
-    paddingRight: 16,
-    position: "relative",
+    paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
+    paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
     width: "100%"
   },
   small: {
@@ -182,22 +211,25 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
   },
   dark: {
     backgroundColor: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.darkBlue,
-    boxShadow: "0 1px 0 0 rgba(255, 255, 255, 0.64)",
+    boxShadow: `0 1px 0 0 ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white64}`,
     color: "white"
   },
-  verticalAlign: {
-    justifyContent: "center"
-  },
   column: {
-    flex: 1,
     justifyContent: "center"
   },
+  withTitle: {
+    flex: 1
+  },
   wideColumn: {
+    flex: 1,
     flexBasis: "50%"
   },
   leftColumn: {
     alignItems: "center",
     flexDirection: "row",
+    // TODO(WB-1445): Find a way to replicate this behavior with
+    // rightContent.
+    flexShrink: 0,
     justifyContent: "flex-start"
   },
   rightColumn: {
@@ -209,32 +241,26 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
     textAlign: "center"
   },
   subtitle: {
-    color: "rgba(33, 36, 44, 0.64)"
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
   },
   titles: {
-    padding: 12
+    padding: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.small_12
   }
 });
 
 /***/ }),
-/* 4 */
+/* 6 */
 /***/ (function(module, exports) {
 
 module.exports = require("aphrodite");
 
 /***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-color");
-
-/***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_toolbar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* harmony import */ var _components_toolbar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_toolbar_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
 

package/docs.md

@@ -1 +1,5 @@
-The Toolbar component is a generic toolbar wrapper that exposes customization options. An optional title and subtitle property can be used along with left and right content passed as props.
+Documentation for `@khanacademy/wonder-blocks-toolbar` is now in Storybook.
+
+Visit the [Storybook
+Toolbar](https://khan.github.io/wonder-blocks/?path=/docs/toolbar) docs on GitHub
+Pages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-toolbar",
-  "version": "2.1.35",
+  "version": "2.1.36",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -18,6 +18,7 @@
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.5.0",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-typography": "^1.1.34"
   },
   "peerDependencies": {

package/src/components/__docs__/toolbar.argtypes.js

@@ -0,0 +1,94 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import Button from "@khanacademy/wonder-blocks-button";
+import {icons} from "@khanacademy/wonder-blocks-icon";
+import IconButton from "@khanacademy/wonder-blocks-icon-button";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Link from "@khanacademy/wonder-blocks-link";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
+
+const mobile = "@media (max-width: 1023px)";
+
+const styles = StyleSheet.create({
+    fillContent: {
+        marginLeft: Spacing.small_12,
+        [mobile]: {
+            width: "100vw",
+        },
+    },
+    onlyDesktop: {
+        [mobile]: {
+            display: "none",
+        },
+    },
+});
+
+type Mappings = {[key: string]: React.Node};
+
+export const leftContentMappings: Mappings = {
+    none: null,
+    dismissButton: <IconButton icon={icons.dismiss} kind="tertiary" />,
+    lightButton: <IconButton icon={icons.dismiss} light={true} />,
+    hintButton: <IconButton icon={icons.hint} kind="primary" />,
+    multipleContent: (
+        <>
+            <IconButton icon={icons.zoomOut} kind="primary" />
+            <Strut size={Spacing.medium_16} />
+            <IconButton icon={icons.zoomIn} kind="primary" />
+        </>
+    ),
+};
+
+const buttonStyle = {width: 160};
+
+export const rightContentMappings: Mappings = {
+    none: null,
+    primaryButton: <Button>Submit</Button>,
+    tertiaryButton: <Button kind="tertiary">Import...</Button>,
+    nextVideoButton: <Button>Next Video</Button>,
+    lightButton: (
+        <Button kind="secondary" light={true}>
+            Go to Article
+        </Button>
+    ),
+    link: (
+        <Link href="#">
+            <LabelLarge>Go to exercise</LabelLarge>
+        </Link>
+    ),
+    multipleContent: (
+        <>
+            <LabelLarge>7 questions</LabelLarge>
+            <Strut size={Spacing.medium_16} />
+            <Button style={buttonStyle} kind="secondary">
+                Try again
+            </Button>
+            <Strut size={Spacing.medium_16} />
+            <Button style={buttonStyle}>Next exercise</Button>
+        </>
+    ),
+    responsive: (
+        <>
+            <Button style={styles.onlyDesktop} kind="secondary">
+                Continue
+            </Button>
+            <Button style={styles.fillContent}>Up next: video</Button>
+        </>
+    ),
+};
+
+export default {
+    leftContent: {
+        control: {type: "select"},
+        options: (Object.keys(leftContentMappings): Array<string>),
+        mapping: leftContentMappings,
+    },
+    rightContent: {
+        control: {type: "select"},
+        options: (Object.keys(rightContentMappings): Array<string>),
+        mapping: rightContentMappings,
+    },
+};

package/src/components/__docs__/toolbar.stories.js

@@ -0,0 +1,210 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import Toolbar from "@khanacademy/wonder-blocks-toolbar";
+
+import type {StoryComponentType} from "@storybook/react";
+import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import {name, version} from "../../../package.json";
+import ToolbarArgtypes, {
+    leftContentMappings,
+    rightContentMappings,
+} from "./toolbar.argtypes.js";
+
+export default {
+    title: "Toolbar / Toolbar",
+    component: Toolbar,
+    argTypes: ToolbarArgtypes,
+    parameters: {
+        componentSubtitle: ((
+            <ComponentInfo name={name} version={version} />
+        ): any),
+        docs: {
+            description: {
+                component: null,
+            },
+            source: {
+                // See https://github.com/storybookjs/storybook/issues/12596
+                excludeDecorators: true,
+            },
+        },
+    },
+    decorators: [
+        (Story: any): React.Element<typeof View> => (
+            <View style={styles.example}>{Story()}</View>
+        ),
+    ],
+};
+
+const styles = StyleSheet.create({
+    example: {
+        padding: Spacing.large_24,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+
+const Template = (args) => <Toolbar {...args} />;
+
+/**
+ * Default example (interactive).
+ *
+ * A toolbar with left and right content.
+ */
+export const Default: StoryComponentType = Template.bind({});
+
+Default.args = {
+    title: "Counting with small numbers",
+    leftContent: leftContentMappings.dismissButton,
+    rightContent: rightContentMappings.nextVideoButton,
+};
+
+/**
+ * Small toolbar with multiple left side buttons.
+ */
+export const Small: StoryComponentType = Template.bind({});
+
+Small.args = {
+    size: "small",
+    leftContent: leftContentMappings.multipleContent,
+    rightContent: rightContentMappings.tertiaryButton,
+};
+
+Small.parameters = {
+    docs: {
+        description: {
+            story:
+                "A small toolbar with content on both sides.\n\n" +
+                "**Note:** The `IconButton`s are nudged to the left by 1px to match designs.",
+        },
+    },
+};
+
+/**
+ * Toolbar with left icon button and right primary button.
+ */
+export const Medium: StoryComponentType = Template.bind({});
+
+Medium.args = {
+    leftContent: leftContentMappings.hintButton,
+    rightContent: rightContentMappings.primaryButton,
+};
+
+Medium.parameters = {
+    docs: {
+        description: {
+            story:
+                "A toolbar with content on both sides. Note that for this example, we are using the default size (`medium`).\n\n" +
+                "**Note:** The `IconButton` is nudged to the left by 6px to match designs.",
+        },
+    },
+};
+
+/**
+ * Toolbar with title.
+ */
+export const WithTitle: StoryComponentType = Template.bind({});
+
+WithTitle.args = {
+    leftContent: leftContentMappings.dismissButton,
+    title: "Counting with small numbers",
+};
+
+WithTitle.parameters = {
+    docs: {
+        description: {
+            story:
+                "A toolbar that shows how we can combine a title and a dismiss button on the left side.\n\n" +
+                "**Note:** The `IconButton` is nudged to the left by 6px to match designs.",
+        },
+    },
+};
+
+/**
+ * Toolbar with multiple elements on the right.
+ */
+export const WithMultipleElements: StoryComponentType = Template.bind({});
+
+WithMultipleElements.args = {
+    rightContent: rightContentMappings.multipleContent,
+};
+
+WithMultipleElements.parameters = {
+    docs: {
+        description: {
+            story: "This toolbar includes multiple elements on the right.",
+        },
+    },
+};
+
+/**
+ * Header overflow text.
+ */
+export const HeaderOverflowText: StoryComponentType = Template.bind({});
+
+HeaderOverflowText.args = {
+    leftContent: leftContentMappings.dismissButton,
+    subtitle: "1 of 14 questions answered",
+    title: "Patterns of migration and communal bird-feeding given the serious situation of things that will make this string long and obnoxious",
+    rightContent: rightContentMappings.link,
+};
+
+HeaderOverflowText.parameters = {
+    docs: {
+        description: {
+            story:
+                "This example illustrates how the toolbar can work in situations where we include multiple lines of text.\n\n" +
+                "**Note:** The `IconButton` is nudged to the left by 6px to match designs.",
+        },
+    },
+};
+
+/**
+ * Flexible toolbars.
+ */
+export const Responsive: StoryComponentType = Template.bind({});
+
+Responsive.args = {
+    leftContent: leftContentMappings.hintButton,
+    rightContent: rightContentMappings.responsive,
+};
+
+Responsive.parameters = {
+    docs: {
+        description: {
+            story: "Sometimes there will be cases where we want to fill the content of one of the sides of the toolbar. This example demonstrates how toolbars can be used flexibly without breaking your layouts.",
+        },
+    },
+    chromatic: {
+        // Test responsiveness of the toolbar.
+        viewports: [320, 768, 1024],
+    },
+};
+
+/**
+ * Inverted dark-color scheme
+ */
+export const Dark: StoryComponentType = Template.bind({});
+
+Dark.args = {
+    color: "dark",
+    title: "Title",
+    leftContent: leftContentMappings.lightButton,
+    rightContent: rightContentMappings.lightButton,
+};
+
+Dark.parameters = {
+    backgrounds: {
+        default: "darkBlue",
+    },
+    docs: {
+        description: {
+            story:
+                "A toolbar can be also used in a dark color scheme.\n\n" +
+                "**Note:** Notice that there's a white hairline in this case, and that the background is transparent (to allow the Dark Blue or illustrated background to come through).",
+        },
+    },
+};