From 7c9fe750bbebec37a1c89a594d91e45567493777 Mon Sep 17 00:00:00 2001 From: "Tim R. Bula" Date: Tue, 16 Aug 2022 13:22:48 -0500 Subject: [PATCH] chore: remove knobs, fix some styles --- package.json | 1 - .../ComboBoxMultiSelect.stories.jsx | 23 ++-- .../Creatable/Creatable.stories.jsx | 31 +++-- .../DateInput/DateInput.stories.jsx | 25 ++-- .../DecisionButtons.stories.jsx | 9 +- .../DelayedRender/DelayedRender.jsx | 4 +- src/components/Error403/Error403.stories.jsx | 1 - src/components/Error404/Error404.stories.jsx | 2 - .../ErrorPage/ErrorPage.stories.jsx | 9 +- .../ErrorPageCore/ErrorPageCore.stories.jsx | 10 +- .../GdprRedirectModal/_gdprRedirectModal.scss | 5 +- src/components/Header/Header.stories.jsx | 29 +++-- .../HeaderMenuUser/HeaderMenuUser.stories.jsx | 5 +- .../PlatformBanner/PlatformBanner.stories.jsx | 1 - .../ProtectedRoute/ProtectedRoute.stories.jsx | 5 +- .../RadioGroup/RadioGroup.stories.jsx | 17 ++- src/components/TextArea/TextArea.stories.jsx | 19 ++- .../TextInput/TextInput.stories.jsx | 13 +- src/components/Theming/Theming.stories.jsx | 4 - src/components/Toggle/Toggle.stories.jsx | 15 ++- src/components/UIShell/UIShell.stories.jsx | 119 +++++++++--------- src/styles/index.scss | 14 +-- 22 files changed, 170 insertions(+), 191 deletions(-) diff --git a/package.json b/package.json index f14a185b..a8840e3e 100644 --- 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 index 4c1f1682..17cf8ad5 100644 --- 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) => { 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 ( 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 index 04ba6234..dd929404 100644 --- 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 ( @@ -39,10 +38,10 @@ export const NonDeletable = (args) => { return ( { @@ -73,10 +72,10 @@ export const LimitTheNumberOfAddedValues = (args) => { return ( { diff --git a/src/components/DateInput/DateInput.stories.jsx b/src/components/DateInput/DateInput.stories.jsx index 3776e1dc..5b73acce 100644 --- 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} /> diff --git a/src/components/DecisionButtons/DecisionButtons.stories.jsx b/src/components/DecisionButtons/DecisionButtons.stories.jsx index d270a723..582e2543 100644 --- 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) => { { return ( } {...args} /> @@ -30,7 +29,7 @@ export const Default = (args) => { export const MessageLink = (args) => { return ( Hello there, use Boomerang! diff --git a/src/components/ErrorPageCore/ErrorPageCore.stories.jsx b/src/components/ErrorPageCore/ErrorPageCore.stories.jsx index 0b2f2ef4..7006c4b0 100644 --- 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 ( ); @@ -29,7 +27,7 @@ export const Default = (args) => { export const MessageLink = (args) => { return ( Hello there, use Boomerang! diff --git a/src/components/GdprRedirectModal/_gdprRedirectModal.scss b/src/components/GdprRedirectModal/_gdprRedirectModal.scss index 21948660..f9e0bf8b 100644 --- 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 index 4928817c..181ee823 100644 --- 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) => (
( 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) => (
( name: "Admin", url: "https://servicesessentials.ibm.com/admin/", }, - ])} + ]} notificationsConfig={{ wsUrl: mockSocketUrl, }} diff --git a/src/components/HeaderMenuUser/HeaderMenuUser.stories.jsx b/src/components/HeaderMenuUser/HeaderMenuUser.stories.jsx index 2556035d..ae299c08 100644 --- a/src/components/HeaderMenuUser/HeaderMenuUser.stories.jsx +++ b/src/components/HeaderMenuUser/HeaderMenuUser.stories.jsx @@ -1,4 +1,3 @@ -import { text } from "@storybook/addon-knobs"; import HeaderMenuUser from "./HeaderMenuUser"; const styleProp = { @@ -16,8 +15,8 @@ export const Default = () => { return (
{() => null} diff --git a/src/components/PlatformBanner/PlatformBanner.stories.jsx b/src/components/PlatformBanner/PlatformBanner.stories.jsx index 20b0f5d6..b34bd136 100644 --- a/src/components/PlatformBanner/PlatformBanner.stories.jsx +++ b/src/components/PlatformBanner/PlatformBanner.stories.jsx @@ -1,4 +1,3 @@ -import { select, text } from "@storybook/addon-knobs"; import PlatformBanner from "./PlatformBanner"; export default { diff --git a/src/components/ProtectedRoute/ProtectedRoute.stories.jsx b/src/components/ProtectedRoute/ProtectedRoute.stories.jsx index 0aed856c..9d17534c 100644 --- a/src/components/ProtectedRoute/ProtectedRoute.stories.jsx +++ b/src/components/ProtectedRoute/ProtectedRoute.stories.jsx @@ -1,6 +1,5 @@ import { createMemoryHistory } from "history"; import { Router } from "react-router-dom"; -import { text } from "@storybook/addon-knobs"; import ProtectedRoute from "./ProtectedRoute"; export default { @@ -48,7 +47,7 @@ WithCustomMessage.args = { allowedUserRoles: ["admin", "operator"], component: Component, path: "/", - title: text("title", "custom title"), - subtitle: text("subtitle", "custom subtitle"), + title: "custom title", + subtitle: "custom subtitle", userRole: "user", }; diff --git a/src/components/RadioGroup/RadioGroup.stories.jsx b/src/components/RadioGroup/RadioGroup.stories.jsx index 92e9eed1..a8bd79f8 100644 --- a/src/components/RadioGroup/RadioGroup.stories.jsx +++ b/src/components/RadioGroup/RadioGroup.stories.jsx @@ -1,5 +1,4 @@ import { action } from "@storybook/addon-actions"; -import { text } from "@storybook/addon-knobs"; import RadioGroup from "./RadioGroup"; export default { @@ -20,9 +19,9 @@ export const Default = (args) => { return ( { return ( {}} options={options2} orientation="vertical" - tooltipContent={text("tooltipContent", "Tooltip for radioGroup")} + tooltipContent={"Tooltip for radioGroup"} tooltipProps={{ direction: "right" }} {...args} /> diff --git a/src/components/TextArea/TextArea.stories.jsx b/src/components/TextArea/TextArea.stories.jsx index 640e0b54..547e829a 100644 --- a/src/components/TextArea/TextArea.stories.jsx +++ b/src/components/TextArea/TextArea.stories.jsx @@ -1,6 +1,5 @@ import React from "react"; import { action } from "@storybook/addon-actions"; -import { object, text } from "@storybook/addon-knobs"; import TextArea from "./TextArea"; export default { @@ -34,8 +33,8 @@ export const Default = (args) => {