@pareto-engineering/design-system 4.0.0-alpha.59 → 4.0.0-alpha.61

package/src/ui/a/TextSteps/TextSteps.jsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
 
 // Local Definitions
 
@@ -21,38 +20,32 @@ const Steps = ({
   style,
   items,
   title,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        'grid',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {title && (
-      <p className="title h4">
-        {title}
-      </p>
-      )}
-      {items.map((item, i) => (
-        <>
-          <div className=" number h3 start-1 span-2 md-start-1 md-span-2"><p>{i + 1}</p></div>
-          <div className=" description"><p>{item}</p></div>
-        </>
-      ))}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      'grid',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {title && (
+    <p className="title h4">
+      {title}
+    </p>
+    )}
+    {items.map((item, i) => (
+      <>
+        <div className=" number h3 start-1 span-2 md-start-1 md-span-2"><p>{i + 1}</p></div>
+        <div className=" description"><p>{item}</p></div>
+      </>
+    ))}
+  </div>
+)
 
 Steps.propTypes = {
   /**

package/src/ui/a/Timestamp/Timestamp.jsx

@@ -2,17 +2,19 @@
 import * as React from 'react'
 
 import {
-  useInsertionEffect, useMemo, useCallback, useState,
+  useMemo, useCallback, useState,
 } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem/exports'
-
 import {
   format, differenceInDays, formatDistance, formatRelative,
 } from 'date-fns'
 
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -36,10 +38,6 @@ const Timestamp = ({
   // ...otherProps
   as:Element,
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [currentDisplay, setCurrentDisplay] = useState(enabledFormats[0])
 
   const formatMap = useMemo(() => ({

package/src/ui/a/Tip/Tip.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -26,32 +26,26 @@ const Tip = ({
   color,
   backgroundColor,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <Wrapper
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${backgroundColor}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <span className={`x-${color} c-x icon`}>
-        {icon}
-      </span>
-      {children}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${backgroundColor}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <span className={`x-${color} c-x icon`}>
+      {icon}
+    </span>
+    {children}
+  </Wrapper>
+)
 
 Tip.propTypes = {
   /**

package/src/ui/a/ToggleSwitch/ToggleSwitch.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -20,41 +20,39 @@ const ToggleSwitch = ({
   id,
   className:userClassName,
   style,
-  handleOnClick,
+  handleOnChange,
   checked,
   size,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <button
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        '--size':size,
-        ...style,
-      }}
-      onClick={handleOnClick}
-      type="button"
-      // {...otherProps}
-    >
-      <input type="checkbox" id="switch" checked={checked} />
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label htmlFor="switch" />
-    </button>
-  )
-}
+}) => (
+  <button
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--size':size,
+      ...style,
+    }}
+    type="button"
+    // {...otherProps}
+  >
+    <input
+      type="checkbox"
+      id="switch"
+      checked={checked}
+      onChange={handleOnChange}
+    />
+    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+    <label htmlFor="switch" />
+  </button>
+)
 
 ToggleSwitch.propTypes = {
   /**
@@ -75,7 +73,7 @@ ToggleSwitch.propTypes = {
   /**
    * The onClick handler for this element
    */
-  handleOnClick:PropTypes.func,
+  handleOnChange:PropTypes.func,
 
   /**
    * The checked state of this element

package/src/ui/b/Button/Button.jsx

@@ -1,6 +1,5 @@
 /* @pareto-engineering/generator-front 0.2.4 */
 import * as React from 'react'
-import { useInsertionEffect } from 'react'
 import PropTypes from 'prop-types'
 
 // Package-level Imports
@@ -29,10 +28,6 @@ const Button = ({
   arrowDirection,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const buttonText = isSimple ? <span className={styleNames.modifierUnderlined}>{children}</span>
     : children
 

package/src/ui/b/Button/common/Group/Group.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -19,28 +19,22 @@ const Group = ({
   style,
   children,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      {...otherProps}
-    >
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    {...otherProps}
+  >
+    {children}
+  </div>
+)
 
 Group.propTypes = {
   /**

package/src/ui/b/Card/Card.jsx

@@ -1,8 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
@@ -11,6 +9,8 @@ import { ProgressBar } from 'ui'
 
 import { Group, Section } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,35 +27,29 @@ const Card = ({
   children,
   progress,
   progressBarColor,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {progress && (
-        <ProgressBar
-          attached
-          color={progressBarColor}
-          progress={progress}
-          height=".5em"
-        />
-      )}
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {progress && (
+      <ProgressBar
+        attached
+        color={progressBarColor}
+        progress={progress}
+        height=".5em"
+      />
+    )}
+    {children}
+  </div>
+)
 
 Card.propTypes = {
   /**

package/src/ui/b/Card/common/Group/Group.jsx

@@ -1,14 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
 import { SnapScroller } from 'ui'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -24,9 +24,6 @@ const Group = ({
   desktopType,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
   const Wrapper = type === 'snap-scroller' ? SnapScroller : 'div'
   const wrapperProps = (type === 'snap-scroller' && desktopType !== 'snap-scroller') ? { noScrollOnDesktop: true } : {}
 

package/src/ui/b/Logo/Logo.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useMemo, useInsertionEffect } from 'react'
+import { useMemo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -9,6 +9,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import { SVG } from 'ui/a'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -64,10 +66,6 @@ const Logo = ({
   square,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const contentMap = square ? contentMapSquare : contentMapWithName
   const svgConfig = useMemo(() => contentMap[variant], [variant])
 

package/src/ui/b/Page/Page.jsx

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
-import { useInsertionEffect, useEffect } from 'react'
+import { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
 import { useApp } from 'ui/a'
@@ -8,8 +8,7 @@ import { useApp } from 'ui/a'
 // Imports from the component folder
 import { PageHelmet, Section } from './common'
 import Context from './Context'
-
-// import('./styles.scss')
+import './styles.scss'
 
 // Local Definitions
 const baseClassName = styleNames.base
@@ -30,10 +29,6 @@ const Page = ({
   Background,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const { userTheme } = useApp()
 
   useEffect(() => {

package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx

@@ -1,14 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
 import { useApp } from 'ui/a'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -55,11 +55,6 @@ const SocialMediaButton = ({
   ...otherProps
 }) => {
   const applicationContext = useApp()
-
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const content = type && defaultsMap[type]
   const href = link || applicationContext?.SOCIAL?.[content?.link]
 

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -1,11 +1,13 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
-import { useInsertionEffect, useCallback } from 'react'
+import { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
 
 import { useApp, ToggleSwitch } from 'ui/a'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -26,10 +28,6 @@ const ThemeSelector = ({
     setPreferredTheme,
   } = useApp()
 
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const loopThemes = useCallback(() => {
     const current = themes.indexOf(userTheme)
     setPreferredTheme(themes[(current + 1) % themes.length])
@@ -53,7 +51,7 @@ const ThemeSelector = ({
         {' '}
         Theme
       </span>
-      <ToggleSwitch checked={userTheme === 'dark'} handleOnClick={loopThemes} />
+      <ToggleSwitch checked={userTheme === 'dark'} handleOnChange={loopThemes} />
     </div>
   )
 }

package/src/ui/b/Title/Title.jsx

@@ -1,14 +1,10 @@
 /* @pareto-engineering/generator-front 0.3.1 */
 import * as React from 'react'
-import { useInsertionEffect } from 'react'
 import PropTypes from 'prop-types'
 
 // Package-level Imports
 import styleNames from '@pareto-engineering/bem/exports'
 
-// Component-level imports
-// import('./styles.scss')
-
 // Helper Definition
 const baseClassName = styleNames.base
 const componentClassName = 'title'
@@ -29,53 +25,47 @@ const Title = ({
   subtitleStyle,
   subtitleProps,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    <HeadingWrapper
       className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
+        headingClassName,
+        styleNames.heading,
       ]
         .filter((e) => e)
         .join(' ')}
-      style={style}
+      style={headingStyle}
+      {...headingProps}
     >
-      <HeadingWrapper
-        className={[
-          headingClassName,
-          styleNames.heading,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={headingStyle}
-        {...headingProps}
-      >
-        { heading }
-      </HeadingWrapper>
-      { subtitle
-    && (
-    <SubtitleWrapper
-      className={[
-        subtitleClassName,
-        styleNames.subtitle,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={subtitleStyle}
-      {...subtitleProps}
-    >
-      { subtitle }
-    </SubtitleWrapper>
-    )}
-    </div>
-  )
-}
+      { heading }
+    </HeadingWrapper>
+    { subtitle
+  && (
+  <SubtitleWrapper
+    className={[
+      subtitleClassName,
+      styleNames.subtitle,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={subtitleStyle}
+    {...subtitleProps}
+  >
+    { subtitle }
+  </SubtitleWrapper>
+  )}
+  </div>
+)
 
 Title.propTypes = {
   /**