removes all knobs

user-interviews · Mar 29, 2024 · 8f4b1c6 · 8f4b1c6
1 parent aef7883
commit 8f4b1c6
Show file tree

Hide file tree

Showing 27 changed files with 310 additions and 391 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -14,7 +14,6 @@ const config = {
     '@storybook/addon-backgrounds',
     '@storybook/addon-controls',
     '@storybook/addon-links',
-    '@storybook/addon-knobs',
     '@storybook/addon-storysource',
     '@storybook/addon-mdx-gfm'
   ],

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,6 +1,14 @@
 import colors from '../src/Styles/colors/palette';
 
 const preview = {
+  decorators: [
+    (Story) => (
+      <div className="Synthesized">
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
   parameters: {
     backgrounds: {
       default: '$ux-white',

diff --git a/package.json b/package.json
@@ -99,7 +99,6 @@
     "@storybook/addon-controls": "^7.4.1",
     "@storybook/addon-docs": "7.4.1",
     "@storybook/addon-jest": "7.4.1",
-    "@storybook/addon-knobs": "7.0.2",
     "@storybook/addon-links": "7.4.1",
     "@storybook/addon-mdx-gfm": "7.4.1",
     "@storybook/addon-storyshots": "7.4.1",
@@ -192,4 +191,4 @@
   "readme": "https://github.com/user-interviews/ui-design-system#readme",
   "homepage": "https://github.com/user-interviews/ui-design-system",
   "_id": "@user-interviews/[email protected]"
-}
+}
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -5139,9 +5139,6 @@ exports[`Storyshots Components/Card Default 1`] = `
   >
     Subtitle
   </h3>
-  <div>
-    Use knobs to try out the different card sizes
-  </div>
 </section>
 `;
 
@@ -7286,13 +7283,6 @@ exports[`Storyshots Components/Form Elements/CheckboxButtonGroup Default 1`] = `
     htmlFor="checkbox-button-group"
   >
     Legend
-    <span
-      className="InputLegend__helper-text"
-    >
-       (
-      use the knobs to try out different variations
-      )
-    </span>
   </legend>
   <div
     className="CheckboxButtonGroup"
@@ -8115,7 +8105,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
     name=""
   >
     <label
-      className="FormControlLabel FormControlLabel--active"
+      className="FormControlLabel FormControlLabel--bordered FormControlLabel--active"
       htmlFor="value-1"
     >
       <span
@@ -8135,7 +8125,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
       </span>
     </label>
     <label
-      className="FormControlLabel"
+      className="FormControlLabel FormControlLabel--bordered"
       htmlFor="value-2"
     >
       <span
@@ -8155,7 +8145,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
       </span>
     </label>
     <label
-      className="FormControlLabel"
+      className="FormControlLabel FormControlLabel--bordered"
       htmlFor="value-3"
     >
       <span
@@ -8666,13 +8656,6 @@ exports[`Storyshots Components/Form Elements/RadioButtonGroup Default 1`] = `
     htmlFor="radio-button-group"
   >
     Legend
-    <span
-      className="InputLegend__helper-text"
-    >
-       (
-      use the knobs to try out different variations
-      )
-    </span>
   </legend>
   <div
     className="RadioButtonGroup"
@@ -11718,6 +11701,57 @@ Array [
 ]
 `;
 
+exports[`Storyshots Components/RichTextEditor Set Content 1`] = `
+Array [
+  <button
+    className="Button btn btn-primary"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Set content to "Oh hey"
+  </button>,
+  <span
+    aria-busy={true}
+    aria-live="polite"
+  >
+    <span
+      className="react-loading-skeleton LoadingSkeleton"
+      style={
+        Object {
+          "--base-color": "#E1E1E1",
+          "borderRadius": "4px",
+          "height": 40,
+          "width": "100%",
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>,
+  <span
+    aria-busy={true}
+    aria-live="polite"
+  >
+    <span
+      className="react-loading-skeleton LoadingSkeleton"
+      style={
+        Object {
+          "--base-color": "#E1E1E1",
+          "borderRadius": "4px",
+          "height": 70,
+          "width": "100%",
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>,
+]
+`;
+
 exports[`Storyshots Components/Selects/Async Default 1`] = `
 <div
   className="FormGroup"
@@ -25206,7 +25240,7 @@ Array [
   />,
   <div>
     <p>
-      Click the button to see a toast message.  Use the knobs to try different types!
+      Click the button to see a toast message.
     </p>
     <button
       className="Button btn btn-primary"
@@ -25228,7 +25262,7 @@ Array [
   />,
   <div>
     <p>
-      Click the button to see a toast message.  Use the knobs to try different types!
+      Click the button to see a toast message.
     </p>
     <button
       className="Button btn btn-primary"
@@ -25250,7 +25284,7 @@ Array [
   />,
   <div>
     <p>
-      Click the button to see a toast message.  Use the knobs to try different types!
+      Click the button to see a toast message.
     </p>
     <button
       className="Button btn btn-primary"
@@ -25272,7 +25306,7 @@ Array [
   />,
   <div>
     <p>
-      Click the button to see a toast message.  Use the knobs to try different types!
+      Click the button to see a toast message.
     </p>
     <button
       className="Button btn btn-primary"

diff --git a/src/Alert/Alert.stories.jsx b/src/Alert/Alert.stories.jsx
@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { boolean, text, withKnobs } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 import { Alert, MessageTypes } from 'src/Alert';
@@ -14,7 +13,6 @@ import '../../scss/global.scss';
 export default {
   title: 'Components/Alert',
   component: Alert,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -25,49 +23,49 @@ export default {
 export const Success = () => (
   <Alert
     id="1"
-    message={text('Message', 'Success message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Success title')}
+    message="Success message"
+    removeBorderLeft={false}
+    title="Success title"
     type={MessageTypes.SUCCESS}
   />
 );
 
 export const Info = () => (
   <Alert
     id="2"
-    message={text('Message', 'Info message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Info title')}
+    message="Info message"
+    removeBorderLeft={false}
+    title="Info title"
     type={MessageTypes.INFO}
   />
 );
 
 export const Feature = () => (
   <Alert
     id="3"
-    message={text('Message', 'Some context around new feature if needed.')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'New feature alert!')}
+    message="Some context around new feature if needed."
+    removeBorderLeft={false}
+    title="New feature alert!"
     type={MessageTypes.FEATURE}
   />
 );
 
 export const Error = () => (
   <Alert
     id="4"
-    message={text('Message', 'Error message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Error title')}
+    message="Error message"
+    removeBorderLeft={false}
+    title="Error title"
     type={MessageTypes.ERROR}
   />
 );
 
 export const Warning = () => (
   <Alert
     id="5"
-    message={text('Message', 'Warning message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Warning title')}
+    message="Warning message"
+    removeBorderLeft={false}
+    title="Warning title"
     type={MessageTypes.WARNING}
   />
 );
@@ -79,9 +77,9 @@ const onDismiss = (id) => {
 export const WithDismiss = () => (
   <Alert
     id="6"
-    message={text('Message', 'Default message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Default title')}
+    message="Default message"
+    removeBorderLeft={false}
+    title="Default title"
     type={MessageTypes.SUCCESS}
     onDismiss={onDismiss}
   />
@@ -114,7 +112,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="8"
       message="Success message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="Success title"
       type={MessageTypes.SUCCESS}
       onDismiss={onDismiss}
@@ -123,7 +121,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="9"
       message="Info message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="Info title"
       type={MessageTypes.INFO}
       onDismiss={onDismiss}
@@ -132,7 +130,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="11"
       message="Error message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="Error title"
       type={MessageTypes.ERROR}
       onDismiss={onDismiss}
@@ -141,7 +139,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="12"
       message="Warning message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="Warning title"
       type={MessageTypes.WARNING}
       onDismiss={onDismiss}
@@ -150,7 +148,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="13"
       message="Some context around new feature if needed"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="New feature alert!"
       type={MessageTypes.FEATURE}
       onDismiss={onDismiss}
@@ -167,8 +165,8 @@ export const WithCallToAction = () => (
           <GoogleCalendarButton />
         </Fragment>
       )}
-      removeBorderLeft={boolean('removeBorderLeft', false)}
-      title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
+      removeBorderLeft={false}
+      title="Connect to Google Calendar to create reminders automatically"
       type={MessageTypes.ANNOUNCEMENT}
       onDismiss={onDismiss}
     />
@@ -177,10 +175,10 @@ export const WithCallToAction = () => (
     <Alert
       action={<GoogleCalendarButton />}
       id="8"
-      message={text('Message', `When you confirm a session we’ll automatically
-      add an event and reminders to your Google Calendar.`)}
-      removeBorderLeft={boolean('removeBorderLeft', false)}
-      title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
+      message={`When you confirm a session we’ll automatically
+      add an event and reminders to your Google Calendar.`}
+      removeBorderLeft={false}
+      title="Connect to Google Calendar to create reminders automatically"
       type={MessageTypes.ANNOUNCEMENT}
       onDismiss={onDismiss}
     />