chore: remove knobs, fix some styles

boomerang-io · Aug 16, 2022 · 7c9fe75 · 7c9fe75
1 parent 4069a36
commit 7c9fe75
Show file tree

Hide file tree

Showing 22 changed files with 170 additions and 191 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,6 @@
     "@commitlint/config-conventional": "^17.0.3",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.5.9",
     "@storybook/addon-storysource": "^6.5.9",
     "@storybook/builder-vite": "^0.1.41",

diff --git a/src/components/ComboBoxMultiSelect/ComboBoxMultiSelect.stories.jsx b/src/components/ComboBoxMultiSelect/ComboBoxMultiSelect.stories.jsx
@@ -1,5 +1,4 @@
 import { action } from "@storybook/addon-actions";
-import { object, text } from "@storybook/addon-knobs";
 import MultiSelect from "./ComboBoxMultiSelect";
 
 export default {
@@ -43,11 +42,11 @@ export const Default = (args) => {
     <MultiSelect
       id="multi-select"
       initialSelectedItems={initialDefaultAnimals}
-      items={object("items", animals)}
+      items={animals}
       itemToString={(item) => item.label}
       onChange={action("Multiselect changed")}
-      titleText={text("titleText", "Select some animals")}
-      placeholder={text("placeholder", "Select an animal")}
+      titleText={"Select some animals"}
+      placeholder={"Select an animal"}
       {...args}
     />
   );
@@ -57,11 +56,11 @@ export const NoSelectedItems = (args) => {
   return (
     <MultiSelect
       id="multi-select"
-      items={object("items", animals)}
+      items={animals}
       itemToString={(item) => item.label}
       onChange={action("Multiselect changed")}
-      titleText={text("titleText", "Select some animals")}
-      placeholder={text("placeholder", "Select an animal")}
+      titleText={"Select some animals"}
+      placeholder={"Select an animal"}
       {...args}
     />
   );
@@ -80,13 +79,13 @@ export const KitchenSink = (args) => {
         { label: "Cat", value: "cat" },
         { label: "Cheetah", value: "cheetah" },
       ]}
-      items={object("items", animals)}
+      items={animals}
       itemToString={(item) => item.label}
       onChange={action("Multiselect changed")}
-      titleText={text("titleText", "Select some animals")}
-      placeholder={text("placeholder", "Select an animal")}
-      helperText={text("helperText", "Some helper text")}
-      tooltipContent={text("tooltipContent", "Tooltip for multiSelect")}
+      titleText={"Select some animals"}
+      placeholder={"Select an animal"}
+      helperText={"Some helper text"}
+      tooltipContent={"Tooltip for multiSelect"}
       tooltipProps={{ direction: "top" }}
       {...args}
     />

diff --git a/src/components/Creatable/Creatable.stories.jsx b/src/components/Creatable/Creatable.stories.jsx
@@ -1,5 +1,4 @@
 import { action } from "@storybook/addon-actions";
-import { text } from "@storybook/addon-knobs";
 import Creatable from "./Creatable";
 
 export default {
@@ -25,10 +24,10 @@ export const Default = (args) => {
   return (
     <Creatable
       id="text-input-creatable"
-      labelText={text("labelText", "Creatable")}
+      labelText={"Creatable"}
       onChange={action("creatable change")}
       helperText="Test helperText"
-      placeholder={text("placeholder", "Create some values")}
+      placeholder={"Create some values"}
       type="text"
       {...args}
     />
@@ -39,10 +38,10 @@ export const NonDeletable = (args) => {
   return (
     <Creatable
       id="text-input-creatable"
-      labelText={text("labelText", "Creatable")}
+      labelText={"Creatable"}
       onChange={action("creatable change")}
       helperText="Test helperText"
-      placeholder={text("placeholder", "Create some values")}
+      placeholder={"Create some values"}
       initialValues="test,test2"
       nonDeletable={true}
       type="text"
@@ -56,13 +55,13 @@ export const KeyValuePair = (args) => {
     <Creatable
       createKeyValuePair
       id="key-value-creatable"
-      keyLabelText={text("keyLabelText", "Creatable Key")}
-      valueLabelText={text("valueLabelText", "Creatable Value")}
+      keyLabelText={"Creatable Key"}
+      valueLabelText={"Creatable Value"}
       onChange={action("creatable change")}
-      keyPlaceholder={text("keyPlaceholder", "Key")}
-      valuePlaceholder={text("valuePlaceholder", "Value")}
-      keyHelperText={text("keyHelperText", "Key Helper")}
-      valueHelperText={text("valueHelperText", "Value Helper")}
+      keyPlaceholder={"Key"}
+      valuePlaceholder={"Value"}
+      keyHelperText={"Key Helper"}
+      valueHelperText={"Value Helper"}
       type="text"
       {...args}
     />
@@ -73,10 +72,10 @@ export const LimitTheNumberOfAddedValues = (args) => {
   return (
     <Creatable
       id="limit-values-creatable"
-      labelText={text("labelText", "Creatable with added items limited")}
+      labelText={"Creatable with added items limited"}
       onChange={action("creatable change")}
       helperText="Items added limited by 3"
-      placeholder={text("placeholder", "Create some values")}
+      placeholder={"Create some values"}
       type="text"
       max={3}
       {...args}
@@ -89,11 +88,11 @@ export const KitchenSink = (args) => {
     <Creatable
       id="tooltip-creatable"
       helperText="Example helper text for creatable"
-      labelText={text("labelText", "Controlled Creatable")}
-      placeholder={text("placeholder", "Create some values")}
+      labelText={"Controlled Creatable"}
+      placeholder={"Create some values"}
       onChange={action("creatable change")}
       type="text"
-      tooltipContent={text("tooltipContent", "Tooltip for creatable")}
+      tooltipContent={"Tooltip for creatable"}
       tooltipProps={{ direction: "top" }}
       {...args}
     />

diff --git a/src/components/DateInput/DateInput.stories.jsx b/src/components/DateInput/DateInput.stories.jsx
@@ -1,5 +1,4 @@
 import { action } from "@storybook/addon-actions";
-import { object, text } from "@storybook/addon-knobs";
 import DateInput from "./DateInput";
 
 export default {
@@ -20,7 +19,7 @@ export const Default = (args) => {
       id="default-date-input"
       onCalendarChange={action("date input calendar change")}
       onChange={action("date input change")}
-      placeholder={text("placeholder", "yyyy-mm-dd")}
+      placeholder={"yyyy-mm-dd"}
       autoComplete="off"
       dateFormat="Y-m-d"
       max="2020-01-31T13:10:20.219+00:00"
@@ -36,7 +35,7 @@ export const ReadOnly = (args) => {
       id="read-only-date-input"
       onCalendarChange={action("date input calendar change")}
       onChange={action("date input change")}
-      placeholder={text("placeholder", "yyyy-mm-dd")}
+      placeholder={"yyyy-mm-dd"}
       autoComplete="off"
       dateFormat="Y-m-d"
       max="2020-01-31T13:10:20.219+00:00"
@@ -55,11 +54,11 @@ export const Range = (args) => {
         id="range-date-input"
         dateFormat="Y-m-d"
         onChange={action("date input change")}
-        placeholder={text("placeholder", "mm/dd/yyyy")}
-        helperText={text("helperText", "Some helper text")}
-        labelText={text("labelText", "Label for text input")}
-        tooltipContent={text("tooltipContent", "Tooltip for text input")}
-        tooltipProps={object("tooltipProps", { placement: "top" })}
+        placeholder={"mm/dd/yyyy"}
+        helperText={"Some helper text"}
+        labelText={"Label for text input"}
+        tooltipContent={"Tooltip for text input"}
+        tooltipProps={{ placement: "top" }}
         max="2021-10-31T13:10:20.219+00:00"
         min="2021-01-01T13:10:20.219+00:00"
         value="2021-08-15T13:10:20.219+00:00,2021-09-19T13:10:20.219+00:00"
@@ -77,12 +76,12 @@ export const KitchenSink = (args) => {
         id="tooltip-label-date-input"
         onCalendarChange={action("date input calendar change")}
         onChange={action("date input change")}
-        placeholder={text("placeholder", "mm/dd/yyyy")}
+        placeholder={"mm/dd/yyyy"}
         autoComplete="off"
-        helperText={text("helperText", "Some helper text")}
-        labelText={text("labelText", "Label for text input")}
-        tooltipContent={text("tooltipContent", "Tooltip for text input")}
-        tooltipProps={object("tooltipProps", { placement: "top" })}
+        helperText={"Some helper text"}
+        labelText={"Label for text input"}
+        tooltipContent={"Tooltip for text input"}
+        tooltipProps={{ placement: "top" }}
         {...args}
       />
     </div>

diff --git a/src/components/DecisionButtons/DecisionButtons.stories.jsx b/src/components/DecisionButtons/DecisionButtons.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
-import { text } from "@storybook/addon-knobs";
 import { Button } from "@carbon/react";
 import { Help, ThumbsUp, ThumbsDown } from "@carbon/react/icons";
 import DecisionButtons from "./DecisionButtons";
@@ -56,11 +55,11 @@ export const Default = (args) => {
       defaultSelected="radio 2"
       name="radio buttons 1"
       onChange={action("Change radio button")}
-      labelText={text("labelText", "Example label text")}
-      helperText={text("helperText", "Example helper text")}
+      labelText={"Example label text"}
+      helperText={"Example helper text"}
       items={items1}
       orientation="vertical"
-      tooltipContent={text("tooltipContent", "Tooltip for DecisionButtons")}
+      tooltipContent={"Tooltip for DecisionButtons"}
       tooltipProps={{ direction: "right" }}
       {...args}
     />
@@ -72,7 +71,7 @@ export const PositiveAndNegativeButtonsAndHorizontal = (args) => {
     <DecisionButtons
       defaultSelected="no"
       name="radio buttons 2"
-      helperText={text("helperText", "Example helper text")}
+      helperText={"Example helper text"}
       onChange={action("Change radio button")}
       orientation="horizontal"
       items={items2}

diff --git a/src/components/DelayedRender/DelayedRender.jsx b/src/components/DelayedRender/DelayedRender.jsx
@@ -6,11 +6,13 @@ DelayedRender.defaultProps = {
 };
 
 DelayedRender.propTypes = {
+  /**
+   * What to render after the delay
+   */
   children: PropTypes.node.isRequired,
   /**
    * Time to delay in milliseconds before rendering the component
    */
-
   delay: PropTypes.number,
 };
 

diff --git a/src/components/Error403/Error403.stories.jsx b/src/components/Error403/Error403.stories.jsx
@@ -1,4 +1,3 @@
-import { text } from "@storybook/addon-knobs";
 import Error403Component from "./index";
 
 export default {

diff --git a/src/components/Error404/Error404.stories.jsx b/src/components/Error404/Error404.stories.jsx
@@ -1,5 +1,3 @@
-import { text } from "@storybook/addon-knobs";
-
 import Error404Component from "./index";
 
 export default {

diff --git a/src/components/ErrorPage/ErrorPage.stories.jsx b/src/components/ErrorPage/ErrorPage.stories.jsx
@@ -1,4 +1,3 @@
-import { text } from "@storybook/addon-knobs";
 import GraphicWrangler from "../GraphicWrangler";
 import ErrorPage from "./ErrorPage";
 
@@ -18,9 +17,9 @@ export default {
 export const Default = (args) => {
   return (
     <ErrorPage
-      header={text("header", "Header")}
-      title={text("title", "Title")}
-      message={text("message", "Message")}
+      header={"Header"}
+      title={"Title"}
+      message={"Message"}
       graphic={<GraphicWrangler />}
       {...args}
     />
@@ -30,7 +29,7 @@ export const Default = (args) => {
 export const MessageLink = (args) => {
   return (
     <ErrorPage
-      title={text("title", "Title")}
+      title={"Title"}
       message={
         <p>
           Hello there, <a href="https://useboomerang.io">use Boomerang!</a>

diff --git a/src/components/ErrorPageCore/ErrorPageCore.stories.jsx b/src/components/ErrorPageCore/ErrorPageCore.stories.jsx
@@ -1,5 +1,3 @@
-import { text } from "@storybook/addon-knobs";
-
 import ErrorPageCore from "./ErrorPageCore";
 
 export default {
@@ -18,9 +16,9 @@ export default {
 export const Default = (args) => {
   return (
     <ErrorPageCore
-      header={text("header", "Header")}
-      title={text("title", "Title")}
-      message={text("message", "Message")}
+      header={"Header"}
+      title={"Title"}
+      message={"Message"}
       {...args}
     />
   );
@@ -29,7 +27,7 @@ export const Default = (args) => {
 export const MessageLink = (args) => {
   return (
     <ErrorPageCore
-      title={text("title", "Title")}
+      title={"Title"}
       message={
         <p>
           Hello there, <a href="https://useboomerang.io">use Boomerang!</a>

diff --git a/src/components/GdprRedirectModal/_gdprRedirectModal.scss b/src/components/GdprRedirectModal/_gdprRedirectModal.scss
@@ -2,16 +2,17 @@
 .#{$prefix}--bmrg-redirect__img {
   width: 100%;
   height: 10rem;
-  margin-top: 1.5rem;
+  margin: 1.5rem 0rem;
 }
 
 .#{$prefix}--bmrg-redirect__body {
+  display: block;
   height: 1.25rem;
   font-size: 0.875rem;
-  font-weight: 600;
   line-height: 1.25rem;
   text-transform: initial;
   margin-bottom: 1.45rem;
+  max-width: 72ch;
 }
 
 .#{$prefix}--bmrg-redirect-container {

diff --git a/src/components/Header/Header.stories.jsx b/src/components/Header/Header.stories.jsx
@@ -1,4 +1,3 @@
-import { text, boolean, object } from "@storybook/addon-knobs";
 import { Link, Router } from "react-router-dom";
 import { ServiceDesk } from "@carbon/react/icons";
 import { Modal, SideNav, SideNavLink, SideNavItems, SideNavMenu, SideNavMenuItem } from "@carbon/react";
@@ -15,13 +14,13 @@ export default {
   component: Header,
 };
 
-export const Default = () => (
+export const Default = (args) => (
   <Header
-    renderLogo={boolean("renderLogo", true)}
-    appName={text("appName", "")}
-    platformName={text("platformName", "")}
-    enableNotifications={boolean("enableNotifications", true)}
-    navLinks={object("navLinks", [
+    renderLogo={false}
+    appName={"App"}
+    platformName={"Boomerang"}
+    enableNotifications={true}
+    navLinks={[
       {
         name: "Launchpad",
         url: "https://servicesessentials.ibm.com/launchpad/",
@@ -42,7 +41,7 @@ export const Default = () => (
         name: "Admin",
         url: "https://servicesessentials.ibm.com/admin/",
       },
-    ])}
+    ]}
     notificationsConfig={{
       wsUrl: mockSocketUrl,
     }}
@@ -74,14 +73,14 @@ export const Default = () => (
   />
 );
 
-export const WithIntegratedSidenav = () => (
+export const WithIntegratedSidenav = (args) => (
   <Router history={createMemoryHistory({ initialEntries: ["/"] })}>
     <Header
-      renderLogo={boolean("renderLogo", true)}
-      enableNotifications={boolean("enableNotifications", true)}
-      companyName={text("companyName", "")}
-      productName={text("productName", "")}
-      navLinks={object("navLinks", [
+      renderLogo={false}
+      enableNotifications={true}
+      companyName={"Boomerang"}
+      productName={"Flow"}
+      navLinks={[
         {
           name: "Launchpad",
           url: "https://servicesessentials.ibm.com/launchpad/",
@@ -102,7 +101,7 @@ export const WithIntegratedSidenav = () => (
           name: "Admin",
           url: "https://servicesessentials.ibm.com/admin/",
         },
-      ])}
+      ]}
       notificationsConfig={{
         wsUrl: mockSocketUrl,
       }}