EP-6631: Clean up rebrand styles for components Q-Z

.changeset/small-humans-return.md

@@ -0,0 +1,19 @@
+---
+"@igloo-ui/select": major
+"@igloo-ui/tabs": major
+"@igloo-ui/tag": major
+"@igloo-ui/toaster": major
+"@igloo-ui/toggle": major
+"@igloo-ui/tooltip": major
+"@igloo-ui/radio": minor
+"@igloo-ui/stacked-bar": minor
+"@igloo-ui/stepper": minor
+"@igloo-ui/tag-picker": minor
+"@igloo-ui/text-editor": minor
+"@igloo-ui/textarea": minor
+"@igloo-ui/vertical-bar-chart": minor
+"@shared/components": minor
+---
+
+Clean up non-Workleap rebranded styles for components Q-Z.
+All consumers should now be using the Workleap branded versions of the components. This will happen automatically, and consumers can stop setting `data-brand="workleap"` for these components.

.storybook/withBrandDecorator.jsx

@@ -1,27 +1,12 @@
-import isChromatic from "chromatic/isChromatic";
-import React from 'react';
+import { useEffect } from 'react';
 
 export const withBrandDecorator = (StoryFn, context) => {
-    if(isChromatic()) { // The brand selector is not available in Chromatic
-        return StoryFn();
-    }
-
-    return (
-        <BrandProvider brand={context.globals.brand} >
-            {StoryFn()}
-        </BrandProvider>
-    )
-}
-
-export const BrandProvider = ({brand, children}) => {
-    const [internalBrand, setInternalBrand] = React.useState();
-
-    React.useEffect(() => {
+    useEffect(() => {
+        const brand = context.parameters.brand ?? context.globals.brand
         //document.documentElement refers to html tag inside iframe#storybook-preview-iframe
         document.documentElement.setAttribute('data-brand', brand);
-        setInternalBrand(brand)
+    }, [context.parameters.brand, context.globals.brand]);
 
-    }, [brand]);
 
-    return <React.Fragment key={internalBrand}>{children}</React.Fragment>;
+    return <StoryFn {...context} />;
 }

packages/Disclosure/src/Disclosure.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
-import Substract from '@igloo-ui/icons/dist/Substract';
+import Button from '@igloo-ui/button';
 import ArrowUp from '@igloo-ui/icons/dist/ArrowUp';
 import Settings from '@igloo-ui/icons/dist/Settings';
-import Button from '@igloo-ui/button';
+import Substract from '@igloo-ui/icons/dist/Substract';
 import Tag from '@igloo-ui/tag';
 
 import readme from '../README.md';
@@ -24,7 +24,7 @@ export default {
   },
 } as Meta<typeof Disclosure>;
 
-export const Overview = {
+export const Overview: StoryObj<typeof Disclosure> = {
   args: {
     children: (
       <div style={{ background: '#F7F9FA', padding: '2.4rem' }}>
@@ -47,6 +47,9 @@ export const Overview = {
       </div>
     ),
   },
+  parameters: {
+    brand: "workleap"
+  }
 };
 
 export const Expanded = {

packages/FormGroup/src/FormGroup.stories.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import Input from '@igloo-ui/input';
-import Textarea from '@igloo-ui/textarea';
-import Select from '@igloo-ui/select';
 import type { OptionType } from '@igloo-ui/list';
+import Select from '@igloo-ui/select';
+import Textarea from '@igloo-ui/textarea';
+import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
 import Section from '@components/section';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 import readme from '../README.md';
 import FormGroup from './FormGroup';
@@ -93,63 +93,69 @@ export const info = () => {
   );
 };
 
-export const OtherFormElements = () => {
-  const smallOptionList = [
-    {
-      label: 'Text option',
-      value: 'text',
-    },
-    {
-      label: 'Disabled option',
-      value: 'disabled',
-      disabled: true,
+export const OtherFormElements: StoryObj<typeof FormGroup> = {
+    parameters: {
+        brand: "workleap",
+        chromatic: { delay: 500 }
     },
-    {
-      label: 'Text option 3',
-      value: 'icon',
-    },
-  ];
-
-  const [hasSelectError, setHasSelectError] = React.useState(true);
-  const [hasTextareaError, setHasTextareaError] = React.useState(true);
-
-  const handleSelectOnChange = (option: OptionType | undefined): void => {
-    setHasSelectError(!option?.value);
-  };
-
-  const handleTextareaOnChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement>
-  ): void => {
-    setHasTextareaError(!event?.target?.value);
-  };
-
-  return (
-    <Section column>
-      <FormGroup
-        label="Error Select"
-        message="You must select an option"
-        showMessage={hasSelectError}
-      >
-        <Select
-          options={smallOptionList}
-          error={hasSelectError}
-          onChange={handleSelectOnChange}
-        >
-          Error
-        </Select>
-      </FormGroup>
-
-      <FormGroup
-        label="Error Textarea"
-        message="You must enter text"
-        showMessage={hasTextareaError}
-      >
-        <Textarea
-          placeholder="Enter text here"
-          error={hasTextareaError}
-          onChange={handleTextareaOnChange}
-        />
-      </FormGroup>
-    </Section>
-  );
-};
+    render: () => {
+        const smallOptionList = [
+            {
+            label: 'Text option',
+            value: 'text',
+            },
+            {
+            label: 'Disabled option',
+            value: 'disabled',
+            disabled: true,
+            },
+            {
+            label: 'Text option 3',
+            value: 'icon',
+            },
+        ];
+
+        const [hasSelectError, setHasSelectError] = React.useState(true);
+        const [hasTextareaError, setHasTextareaError] = React.useState(true);
+
+        const handleSelectOnChange = (option: OptionType | undefined): void => {
+            setHasSelectError(!option?.value);
+        };
+
+        const handleTextareaOnChange = (
+            event: React.ChangeEvent<HTMLTextAreaElement>
+        ): void => {
+            setHasTextareaError(!event?.target?.value);
+        };
+
+        return (
+            <Section column>
+            <FormGroup
+                label="Error Select"
+                message="You must select an option"
+                showMessage={hasSelectError}
+            >
+                <Select
+                options={smallOptionList}
+                error={hasSelectError}
+                onChange={handleSelectOnChange}
+                >
+                Error
+                </Select>
+            </FormGroup>
+
+            <FormGroup
+                label="Error Textarea"
+                message="You must enter text"
+                showMessage={hasTextareaError}
+            >
+                <Textarea
+                placeholder="Enter text here"
+                error={hasTextareaError}
+                onChange={handleTextareaOnChange}
+                />
+            </FormGroup>
+            </Section>
+        );
+    }
+}

packages/List/src/List.stories.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
 
-import Reminder from '@igloo-ui/icons/dist/Reminder';
 import Button from '@igloo-ui/button';
+import Reminder from '@igloo-ui/icons/dist/Reminder';
 import Tag from '@igloo-ui/tag';
 
 import readme from '../README.md';
 
+import type { Member, Option, OptionType } from './List';
 import List from './List';
-import type { Option, Member, OptionType } from './List';
 
 export default {
   title: 'Components/List',
@@ -384,27 +384,32 @@ export const TextIconAndHelperText = () => {
   );
 };
 
-export const Action = () => {
-  const [selectedOption, setSelectedOption] = React.useState<OptionType | null>();
-  const [focusedOption, setFocusedOption] = React.useState<OptionType | null>();
-
-  function handleOptionSelect(option: OptionType) {
-    setSelectedOption(option);
-  }
-
-  function handleOptionFocus(option: OptionType) {
-    setFocusedOption(option);
-  }
-
-  return (
-    <List options={listWithAction}
-    onOptionChange={handleOptionSelect}
-    onOptionFocus={handleOptionFocus}
-    onOptionBlur={() => setFocusedOption(undefined)}
-    selectedOption={selectedOption}
-    focusedOption={focusedOption}
-    style={{ maxWidth: '40rem' }} />
-  );
+export const Action: StoryObj<typeof List> = {
+    parameters: {
+        brand: "workleap"
+    },
+    render: () => {
+        const [selectedOption, setSelectedOption] = React.useState<OptionType | null>();
+        const [focusedOption, setFocusedOption] = React.useState<OptionType | null>();
+
+        function handleOptionSelect(option: OptionType) {
+            setSelectedOption(option);
+        }
+
+        function handleOptionFocus(option: OptionType) {
+            setFocusedOption(option);
+        }
+
+        return (
+            <List options={listWithAction}
+            onOptionChange={handleOptionSelect}
+            onOptionFocus={handleOptionFocus}
+            onOptionBlur={() => setFocusedOption(undefined)}
+            selectedOption={selectedOption}
+            focusedOption={focusedOption}
+            style={{ maxWidth: '40rem' }} />
+        );
+    }
 };
 
 export const Loading = () => {

packages/Modal/src/Modal.stories.tsx

@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
-import isChromatic from 'chromatic/isChromatic';
 import Button from '@igloo-ui/button';
 import Select from '@igloo-ui/select';
+import isChromatic from 'chromatic/isChromatic';
+import React, { useState } from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 import ChromaticWrapper from '@components/chromaticWrapper';
-import Section from '@components/section';
 import Mockup from '@components/mockup';
+import Section from '@components/section';
 
 import readme from '../README.md';
 
@@ -122,37 +122,43 @@ export const removeClose = () => {
   );
 };
 
-export const WithSelect = () => {
-  const [show, setShow] = useState(isChromatic());
-
-  return (
-    <ChromaticWrapper>
-      <Button appearance="secondary" onClick={() => setShow(true)}>
-        open
-      </Button>
-      <Modal 
-          title="I'm a modal"
-          isDismissable isOpen={show} onClose={() => setShow(false)}>
-        <Select options={[
-            {
-                label: 'Text option',
-                value: 'text',
-            },
-            {
-                label: 'Disabled option',
-                value: 'disabled',
-                disabled: true,
-            },
-            {
-                label: 'Text option with icon',
-                value: 'icon'
-            },
-        ]}>
-            Default
-        </Select>
-      </Modal>
-    </ChromaticWrapper>
-  );
+export const WithSelect: StoryObj<typeof Modal> = {
+    parameters: {
+        brand: "workleap",
+        chromatic: { delay: 500 }
+    },
+    render: () => {
+        const [show, setShow] = useState(isChromatic());
+
+        return (
+            <ChromaticWrapper>
+            <Button appearance="secondary" onClick={() => setShow(true)}>
+                open
+            </Button>
+            <Modal
+                title="I'm a modal"
+                isDismissable isOpen={show} onClose={() => setShow(false)}>
+                <Select options={[
+                    {
+                        label: 'Text option',
+                        value: 'text',
+                    },
+                    {
+                        label: 'Disabled option',
+                        value: 'disabled',
+                        disabled: true,
+                    },
+                    {
+                        label: 'Text option with icon',
+                        value: 'icon'
+                    },
+                ]}>
+                    Default
+                </Select>
+            </Modal>
+            </ChromaticWrapper>
+        );
+    }
 };
 
 export const Example = {