@moda/om 17.7.0 → 17.9.0

package/src/components/Select/Select.stories.tsx

@@ -38,7 +38,7 @@ export const Default = () => (
       { idRef: '7', label: undefined, placeholder: 'Placeholder' }
     ]}
   >
-    <Select label="Sort by" options={OPTIONS} onChange={action('onChange')} />
+    <Select label='Sort by' options={OPTIONS} onChange={action('onChange')} />
   </States>
 );
 
@@ -56,7 +56,7 @@ export const ChangingValue = () => {
     return () => clearInterval(interval);
   }, []);
 
-  return <Select label="Sort by" options={OPTIONS} onChange={action('onChange')} value={value} />;
+  return <Select label='Sort by' options={OPTIONS} onChange={action('onChange')} value={value} />;
 };
 
 const COUNTRIES = [
@@ -260,16 +260,16 @@ const COUNTRIES = [
 
 export const Long = () => (
   <Select
-    label="Choose country"
+    label='Choose country'
     options={COUNTRIES.map(country => ({ label: country, value: country }))}
   />
 );
 
 export const AutoFill = () => (
   <>
-    <Input label="Address*" name="addressLine1" />
-    <Input label="City" name="city" />
-    <Input label="Choose country" name="country">
+    <Input label='Address*' name='addressLine1' />
+    <Input label='City' name='city' />
+    <Input label='Choose country' name='country'>
       <Select
         options={COUNTRIES.map(country => ({ label: country, value: country }))}
         allowAutoFill
@@ -313,7 +313,7 @@ export const MultiSelectWithDefaultsComponent = () => {
     <MultiSelect
       onChange={handleSetItems}
       value={selectedItems}
-      placeholder="United States"
+      placeholder='United States'
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />
@@ -323,7 +323,7 @@ export const MultiSelectWithDefaultsComponent = () => {
 export const MultiSelectUncontrolledComponent = () => {
   return (
     <MultiSelect
-      placeholder="United States"
+      placeholder='United States'
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />
@@ -334,7 +334,7 @@ export const MultiSelectUncontrolledSearchComponent = () => {
   return (
     <MultiSelect
       searchable
-      placeholder="United States"
+      placeholder='United States'
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />

package/src/components/Select/Select.test.tsx

@@ -13,7 +13,7 @@ describe('Select', () => {
 
   it('renders correctly', () => {
     const { container } = render(
-      <Select idRef="1" name="name-1" label="Sort by" options={options} />
+      <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
@@ -22,7 +22,7 @@ describe('Select', () => {
 
   it('expands when clicked', async () => {
     const { container } = render(
-      <Select idRef="1" name="name-1" label="Sort by" options={options} />
+      <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
@@ -36,9 +36,9 @@ describe('Select', () => {
       <Select
         defaultValue={undefined}
         disabled
-        idRef="1"
-        name="name-1"
-        label="Sort by"
+        idRef='1'
+        name='name-1'
+        label='Sort by'
         options={options}
       />
     );
@@ -54,9 +54,9 @@ describe('Select', () => {
     render(
       <Select
         defaultValue={undefined}
-        idRef="1"
-        label="Sort by"
-        name="name-1"
+        idRef='1'
+        label='Sort by'
+        name='name-1'
         options={options}
         onChange={onChange}
       />
@@ -73,9 +73,9 @@ describe('Select', () => {
     render(
       <Select
         defaultValue={undefined}
-        idRef="1"
-        label="Sort by"
-        name="name-1"
+        idRef='1'
+        label='Sort by'
+        name='name-1'
         options={options}
         onChange={onChange}
       />
@@ -89,7 +89,7 @@ describe('Select', () => {
 
   it('renders correctly with ":" between label and value if value is not undefined', async () => {
     const { container } = render(
-      <Select idRef="1" name="name-1" label="Sort by" options={options} />
+      <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
@@ -101,7 +101,7 @@ describe('Select', () => {
   });
 
   it('renders correctly when there is no label', async () => {
-    const { container } = render(<Select idRef="1" name="name-1" options={options} />);
+    const { container } = render(<Select idRef='1' name='name-1' options={options} />);
     const button = screen.getByRole('button', { name: 'Select' });
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');

package/src/components/Select/Select.tsx

@@ -105,20 +105,20 @@ export const Select: React.FC<SelectProps> = ({
         {...rest}
       >
         {!allowAutoFill && name && (
-          <input id={idRef} name={name} type="hidden" value={state.value} />
+          <input id={idRef} name={name} type='hidden' value={state.value} />
         )}
 
         <Clickable
           id={`Select__value--${idRef}`}
-          className="Select__value"
+          className='Select__value'
           disabled={disabled}
           onClick={handleToggle}
           data-test-id={dataTestId}
-          aria-haspopup="listbox"
+          aria-haspopup='listbox'
           aria-expanded={state.mode === Mode.Open}
           aria-labelledby={`Select__label--${idRef} Select__value--${idRef}`}
-          type="button"
-          title="Select"
+          type='button'
+          title='Select'
         >
           <SelectLabel
             idRef={idRef}
@@ -154,11 +154,11 @@ export const Select: React.FC<SelectProps> = ({
 
       {allowAutoFill && (
         <input
-          className="Select__hidden-field"
+          className='Select__hidden-field'
           name={name}
           onChange={({ target }) => handleAutofill(target.value)}
           value={value}
-          aria-hidden="true"
+          aria-hidden='true'
           tabIndex={-1}
         />
       )}

package/src/components/Select/SelectOption.tsx

@@ -48,7 +48,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
       data-test-id={dataTestId ? `${dataTestId}--${option.label.replace(' ', '-')}` : undefined}
       aria-label={option.label}
       aria-selected={selected}
-      role="option"
+      role='option'
     >
       {option.label}
     </li>

package/src/components/Select/SelectOptions.tsx

@@ -63,17 +63,17 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
     <div className={classNames('SelectOptions', className)}>
       {searchable && (
         <SearchInput
-          className="SelectOptions__search"
-          placeholder="Search"
+          className='SelectOptions__search'
+          placeholder='Search'
           value={searchPhrase}
           onChange={setSearchPhrase}
           onClear={() => setSearchPhrase('')}
         />
       )}
       <ul
-        className="SelectOptions__list"
+        className='SelectOptions__list'
         tabIndex={-1}
-        role="listbox"
+        role='listbox'
         ref={ref}
         aria-labelledby={`Select__label--${idRef}`}
         aria-activedescendant={`SelectOption--${activeOption?.value}-${idRef}`}
@@ -94,7 +94,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
         ))}
       </ul>
       {options.length === 0 && (
-        <Text className="SelectOptions__none" color="cement">
+        <Text className='SelectOptions__none' color='cement'>
           Nothing found
         </Text>
       )}

package/src/components/Shape/ArcWindow.tsx

@@ -3,18 +3,18 @@ import { ShapeProps } from './Shape';
 
 export const ArcWindow: React.FC<ShapeProps> = () => (
   <svg
-    className="ArcWindow"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    className='ArcWindow'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M20.1097 24V11.6273V8.8331V8.81993C20.1018 3.96884 16.4806 0 12.0536 0C7.6291 0 4.00527 3.96884 4 8.81993V8.8331V11.6273V24H20.1097Z"
-      fill="#003728"
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M20.1097 24V11.6273V8.8331V8.81993C20.1018 3.96884 16.4806 0 12.0536 0C7.6291 0 4.00527 3.96884 4 8.81993V8.8331V11.6273V24H20.1097Z'
+      fill='#003728'
     />
   </svg>
 );

package/src/components/Shape/Bradley.tsx

@@ -4,10 +4,10 @@ import { ShapeProps } from './Shape';
 export const Bradley: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 110 211"
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 110 211'
     {...props}
   >
-    <path d="M110 .336H0v210h45.11v-52.595h19.78v52.595H110V105.147z" />
+    <path d='M110 .336H0v210h45.11v-52.595h19.78v52.595H110V105.147z' />
   </svg>
 );

package/src/components/Shape/Brancusi.tsx

@@ -4,10 +4,10 @@ import { ShapeProps } from './Shape';
 export const Brancusi: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 111 210"
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 111 210'
     {...props}
   >
-    <path d="M110.575 210l-27.5-105 27.5-105h-110l27.501 105L.575 210z" />
+    <path d='M110.575 210l-27.5-105 27.5-105h-110l27.501 105L.575 210z' />
   </svg>
 );

package/src/components/Shape/Circle.tsx

@@ -3,18 +3,18 @@ import { ShapeProps } from './Shape';
 
 export const Circle: React.FC<ShapeProps> = () => (
   <svg
-    className="Circle"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    className='Circle'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M24 12C24 18.6282 18.6282 24 12 24C5.37184 24 0 18.6282 0 12C0 5.37184 5.37184 0 12 0C18.6282 0 24 5.37184 24 12Z"
-      fill="#D7B3D0"
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M24 12C24 18.6282 18.6282 24 12 24C5.37184 24 0 18.6282 0 12C0 5.37184 5.37184 0 12 0C18.6282 0 24 5.37184 24 12Z'
+      fill='#D7B3D0'
     />
   </svg>
 );

package/src/components/Shape/Diamond.tsx

@@ -3,18 +3,18 @@ import { ShapeProps } from './Shape';
 
 export const Diamond: React.FC<ShapeProps> = () => (
   <svg
-    className="Diamond"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    className='Diamond'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 24.0026L0 12.0026L12 0L24 12.0026L12 24.0026Z"
-      fill="#C44CB0"
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M12 24.0026L0 12.0026L12 0L24 12.0026L12 24.0026Z'
+      fill='#C44CB0'
     />
   </svg>
 );

package/src/components/Shape/Keyhole.tsx

@@ -4,10 +4,10 @@ import { ShapeProps } from './Shape';
 export const Keyhole: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 111 210"
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 111 210'
     {...props}
   >
-    <path d="M.8 210h110V86.403h-9.317c5.88-8.833 9.317-19.46 9.317-30.902C110.8 24.85 86.175 0 55.8 0S.8 24.85.8 55.501c0 11.441 3.436 22.069 9.315 30.902H.8V210z" />
+    <path d='M.8 210h110V86.403h-9.317c5.88-8.833 9.317-19.46 9.317-30.902C110.8 24.85 86.175 0 55.8 0S.8 24.85.8 55.501c0 11.441 3.436 22.069 9.315 30.902H.8V210z' />
   </svg>
 );

package/src/components/Shape/Mirror.tsx

@@ -4,10 +4,10 @@ import { ShapeProps } from './Shape';
 export const Mirror: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 111 210"
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 111 210'
     {...props}
   >
-    <path d="M110.03 105c0-22.7-3.786-43.7-10.2-60.874V15.97H84.176C75.724 5.862 65.739 0 55.03 0 44.323 0 34.336 5.862 25.885 15.969H10.23v28.157C3.817 61.3.03 82.3.03 105c0 22.7 3.787 43.7 10.2 60.874v28.157h15.655C34.336 204.138 44.323 210 55.03 210c10.708 0 20.693-5.862 29.146-15.969h15.652v-28.157C106.244 148.7 110.03 127.7 110.03 105z" />
+    <path d='M110.03 105c0-22.7-3.786-43.7-10.2-60.874V15.97H84.176C75.724 5.862 65.739 0 55.03 0 44.323 0 34.336 5.862 25.885 15.969H10.23v28.157C3.817 61.3.03 82.3.03 105c0 22.7 3.787 43.7 10.2 60.874v28.157h15.655C34.336 204.138 44.323 210 55.03 210c10.708 0 20.693-5.862 29.146-15.969h15.652v-28.157C106.244 148.7 110.03 127.7 110.03 105z' />
   </svg>
 );

package/src/components/Shape/Oval.tsx

@@ -4,10 +4,10 @@ import { ShapeProps } from './Shape';
 export const Oval: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 110 210"
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 110 210'
     {...props}
   >
-    <path d="M110 105C110 47.01 85.376 0 55 0S0 47.01 0 105s24.624 105 55 105 55-47.01 55-105z" />
+    <path d='M110 105C110 47.01 85.376 0 55 0S0 47.01 0 105s24.624 105 55 105 55-47.01 55-105z' />
   </svg>
 );

package/src/components/Shape/Triangle.tsx

@@ -3,13 +3,13 @@ import { ShapeProps } from './Shape';
 
 export const Triangle: React.FC<ShapeProps> = () => (
   <svg
-    className="Triangle"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    className='Triangle'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
-    <path fillRule="evenodd" clipRule="evenodd" d="M11.9986 0L0 24H24L11.9986 0Z" fill="#D56B27" />
+    <path fillRule='evenodd' clipRule='evenodd' d='M11.9986 0L0 24H24L11.9986 0Z' fill='#D56B27' />
   </svg>
 );

package/src/components/Shape/Window.tsx

@@ -4,10 +4,10 @@ import { ShapeProps } from './Shape';
 export const Window: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 110 210"
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 110 210'
     {...props}
   >
-    <path d="M110 187.673V21.948H98.87C88.873 8.64 73.08 0 55.247 0 37.412 0 21.619 8.64 11.622 21.948H0v165.725h11.34C21.32 201.198 37.245 210 55.248 210c18 0 33.924-8.802 43.904-22.327H110z" />
+    <path d='M110 187.673V21.948H98.87C88.873 8.64 73.08 0 55.247 0 37.412 0 21.619 8.64 11.622 21.948H0v165.725h11.34C21.32 201.198 37.245 210 55.248 210c18 0 33.924-8.802 43.904-22.327H110z' />
   </svg>
 );

package/src/components/SlidingPane/SlidingPane.stories.tsx

@@ -16,13 +16,13 @@ export const Mobile = () => {
 
   return (
     <>
-      <Stack space={1} direction="horizontal" alignItems="center">
+      <Stack space={1} direction='horizontal' alignItems='center'>
         <RulerIcon />
         <Clickable onClick={handleOpen}>Size Guide</Clickable>
       </Stack>
-      <SlidingPane onClose={handleClose} title="Size Guide" visible={isOpen}>
+      <SlidingPane onClose={handleClose} title='Size Guide' visible={isOpen}>
         <Stack space={2}>
-          <Badge theme="noise">Runs small we recommend sizing up one size.</Badge>
+          <Badge theme='noise'>Runs small we recommend sizing up one size.</Badge>
           <Text>
             Select your region to convert your size. Size and cut may vary between brands. Use this
             chart as a general guide.

package/src/components/SlidingPane/SlidingPane.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
 import ExitIcon from '@moda/icons/exit-16';
+import { FocusOn } from 'react-focus-on';
 import { Clickable } from '../Clickable';
 import { Text } from '../Text';
-
-import './SlidingPane.scss';
 import { Stack } from '../Stack';
+import './SlidingPane.scss';
 
 export type SlidingPaneProps = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
@@ -24,34 +24,36 @@ export const SlidingPane: React.FC<SlidingPaneProps> = ({
 }) => {
   return (
     <>
-      <div
-        className={classNames('SlidingPane', className, {
-          'SlidingPane--active': visible
-        })}
-        {...rest}
-      >
-        <Stack
-          space={0}
-          justifyContent="center"
-          direction="horizontal"
-          className="SlidingPane__top"
-        >
-          <Text treatment="h5" family="serif">
-            {title}
-          </Text>
-          <Clickable className="SlidingPane__close" onClick={onClose}>
-            <ExitIcon />
-          </Clickable>
-        </Stack>
-        <div className="SlidingPane__content">{children}</div>
-      </div>
-
       <div
         className={classNames('SlidingPane__overlay', {
           'SlidingPane__overlay--active': visible
         })}
         onClick={onClose}
       ></div>
+
+      <FocusOn enabled={visible} onClickOutside={onClose} onEscapeKey={onClose}>
+        <div
+          className={classNames('SlidingPane', className, {
+            'SlidingPane--active': visible
+          })}
+          {...rest}
+        >
+          <Stack
+            space={0}
+            justifyContent='center'
+            direction='horizontal'
+            className='SlidingPane__top'
+          >
+            <Text treatment='h5' family='serif'>
+              {title}
+            </Text>
+            <Clickable className='SlidingPane__close' onClick={onClose}>
+              <ExitIcon />
+            </Clickable>
+          </Stack>
+          <div className='SlidingPane__content'>{children}</div>
+        </div>
+      </FocusOn>
     </>
   );
 };

package/src/components/Stack/Stack.test.tsx

@@ -6,7 +6,7 @@ import { Stack } from './Stack';
 describe('Stack', () => {
   it('renders correctly', () => {
     render(
-      <Stack space={6} direction="horizontal">
+      <Stack space={6} direction='horizontal'>
         <div>Hello</div>
         <div>World</div>
       </Stack>

package/src/components/Tabs/TabList.tsx

@@ -10,7 +10,7 @@ export type TabListProps = {
 
 export const TabList: React.FC<TabListProps> = ({ tabs, onTabSelected, activePanel }) => {
   return (
-    <div className="TabList">
+    <div className='TabList'>
       {tabs.map(tab => (
         <Tab key={tab.name} tab={tab} onTabChosen={onTabSelected} activeTab={activePanel} />
       ))}

package/src/components/Tabs/TabPanel.tsx

@@ -6,5 +6,5 @@ export type TabPanelProps = {
 };
 
 export const TabPanel: React.FC<TabPanelProps> = ({ children }) => {
-  return <div className="TabPanel">{children}</div>;
+  return <div className='TabPanel'>{children}</div>;
 };

package/src/components/Tabs/TabPanels.tsx

@@ -9,7 +9,7 @@ export type TabPanelsProps = {
 
 export const TabPanels: React.FC<TabPanelsProps> = ({ panels, activePanel }) => {
   return (
-    <div className="TabPanels">
+    <div className='TabPanels'>
       {panels
         .filter(tab => tab.name === activePanel)
         .map(tab => (

package/src/components/Tabs/Tabs.stories.tsx

@@ -47,9 +47,9 @@ export const WithCallback = () => {
   return (
     <States<TabsProps>>
       <>
-        <Text treatment="h5">Selected Tab:</Text>
+        <Text treatment='h5'>Selected Tab:</Text>
         <Text> {tabName} </Text>
-        <Tabs tabs={TAB_LIST} onTabClicked={handleTabClick} activeTab="tab2" />
+        <Tabs tabs={TAB_LIST} onTabClicked={handleTabClick} activeTab='tab2' />
       </>
     </States>
   );

package/src/components/Tabs/Tabs.test.tsx

@@ -8,12 +8,12 @@ describe('Tabs', () => {
     {
       name: 'tab1',
       title: 'Tab 1',
-      panel: <div className="test">I am a panel</div>
+      panel: <div className='test'>I am a panel</div>
     },
     {
       name: 'tab2',
       title: 'Tab 2',
-      panel: <div className="test">I am also a panel</div>
+      panel: <div className='test'>I am also a panel</div>
     }
   ];
 

package/src/components/Tag/Tag.tsx

@@ -13,7 +13,7 @@ export const Tag: React.FC<TagProps> = ({ className, disabled, onRemove, childre
   <div className={classNames('Tag', className, { 'Tag--disabled': disabled })} {...rest}>
     <div>{children}</div>
     {onRemove && (
-      <Clickable disabled={disabled} aria-label="Remove" onClick={onRemove}>
+      <Clickable disabled={disabled} aria-label='Remove' onClick={onRemove}>
         <ExitIcon />
       </Clickable>
     )}

package/src/components/Text/Text.stories.tsx

@@ -23,24 +23,24 @@ export const Treatments = () => (
 
 export const Colors = () => (
   <States<Partial<TextProps>> states={COLORS}>
-    <Text treatment="h5">Moda Operandi</Text>
+    <Text treatment='h5'>Moda Operandi</Text>
   </States>
 );
 
 export const Families = () => (
   <States<Partial<TextProps>> states={FAMILIES}>
-    <Text treatment="h5">Moda Operandi</Text>
+    <Text treatment='h5'>Moda Operandi</Text>
   </States>
 );
 
 export const Complex = () => (
   <Text>
-    <Text treatment="h6" color="fuchsia" family="serif">
+    <Text treatment='h6' color='fuchsia' family='serif'>
       Moda Operandi
     </Text>
     {' — '}
-    <Text color="money-good" treatment="eyebrow">
-      Happy <Text color="code-red">Holidays</Text>
+    <Text color='money-good' treatment='eyebrow'>
+      Happy <Text color='code-red'>Holidays</Text>
     </Text>
   </Text>
 );

package/src/components/Text/Text.test.tsx

@@ -6,7 +6,7 @@ import { Text } from './Text';
 describe('Text', () => {
   it('renders correctly', () => {
     render(
-      <Text treatment="body2" color="money-good" family="serif">
+      <Text treatment='body2' color='money-good' family='serif'>
         Hello
       </Text>
     );