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

package/src/ui/a/Figure/Figure.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
@@ -23,31 +23,25 @@ const Figure = ({
   src,
   alt,
   caption,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <figure>
-        <img src={src} alt={alt} />
-        <figcaption>{caption || alt}</figcaption>
-      </figure>
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <figure>
+      <img src={src} alt={alt} />
+      <figcaption>{caption || alt}</figcaption>
+    </figure>
+  </div>
+)
 
 Figure.propTypes = {
   /**

package/src/ui/a/HamburgerButton/HamburgerButton.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,37 +26,31 @@ const HamburgerButton = ({
   ariaLabel,
   color,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <button
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-        'hamburger',
-        `hamburger--${hamburgerType}`,
-        isOpen && 'is-active',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      type="button"
-      aria-label={ariaLabel}
-      aria-controls="navigation"
-      {...otherProps}
-    >
-      <span className="hamburger-box">
-        <span className="hamburger-inner" />
-      </span>
-    </button>
-  )
-}
+}) => (
+  <button
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+      'hamburger',
+      `hamburger--${hamburgerType}`,
+      isOpen && 'is-active',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    type="button"
+    aria-label={ariaLabel}
+    aria-controls="navigation"
+    {...otherProps}
+  >
+    <span className="hamburger-box">
+      <span className="hamburger-inner" />
+    </span>
+  </button>
+)
 
 HamburgerButton.propTypes = {
   /**

package/src/ui/a/IconList/IconList.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 { Item } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,32 +27,26 @@ const IconList = ({
   icon,
   iconHover,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <ul
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--list-icon'      :icon && `"${icon}"`,
-        '--list-icon-hover':iconHover && `"${iconHover}"`,
-      }}
-      {...otherProps}
-    >
-      {children}
-    </ul>
-  )
-}
+}) => (
+  <ul
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--list-icon'      :icon && `"${icon}"`,
+      '--list-icon-hover':iconHover && `"${iconHover}"`,
+    }}
+    {...otherProps}
+  >
+    {children}
+  </ul>
+)
 
 IconList.propTypes = {
   /**

package/src/ui/a/Label/Label.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,31 +26,25 @@ const Label = ({
   isGhost,
   as:Wrapper,
   ...props
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <Wrapper
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-        isCompact && styleNames.modifierCompact,
-        isGhost && styleNames.modifierGhost,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      {...props}
-    >
-      {children}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+      isCompact && styleNames.modifierCompact,
+      isGhost && styleNames.modifierGhost,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    {...props}
+  >
+    {children}
+  </Wrapper>
+)
 
 Label.propTypes = {
   /**

package/src/ui/a/LoadingCircle/LoadingCircle.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
@@ -25,57 +25,51 @@ const LoadingCircle = ({
   animationDuration,
   style,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--height-width':heightWidth,
+      '--stroke-width':strokeWidth,
+      ...style,
+    }}
+    // {...otherProps}
+  >
+    <svg
+      viewBox="25 25 50 50"
+      className="svg-circle"
       id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
+      x="0px"
+      y="0px"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      preserveAspectRatio="xMinYMin meet"
       style={{
-        '--height-width':heightWidth,
-        '--stroke-width':strokeWidth,
-        ...style,
+        '--animation-duration':`${animationDuration}s`,
       }}
-      // {...otherProps}
     >
-      <svg
-        viewBox="25 25 50 50"
-        className="svg-circle"
-        id={id}
-        x="0px"
-        y="0px"
-        xmlSpace="preserve"
-        xmlns="http://www.w3.org/2000/svg"
-        version="1.1"
-        preserveAspectRatio="xMinYMin meet"
-        style={{
-          '--animation-duration':`${animationDuration}s`,
-        }}
-      >
-        <circle
-          className="path"
-          cx="50"
-          cy="50"
-          r="20"
-          fill="none"
-          strokeLinecap={strokeLinecap}
-          strokeMiterlimit="10"
-        />
-      </svg>
-    </div>
-  )
-}
+      <circle
+        className="path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+        strokeLinecap={strokeLinecap}
+        strokeMiterlimit="10"
+      />
+    </svg>
+  </div>
+)
 
 LoadingCircle.propTypes = {
   /**

package/src/ui/a/MetaCard/MetaCard.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
@@ -23,29 +23,23 @@ const MetaCard = ({
   children,
   hasBackgroundBlur,
   spaced,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        hasBackgroundBlur && styleNames.modifierBlur,
-        spaced && styleNames.modifierSpaced,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      hasBackgroundBlur && styleNames.modifierBlur,
+      spaced && styleNames.modifierSpaced,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {children}
+  </div>
+)
 
 MetaCard.propTypes = {
   /**

package/src/ui/a/People/People.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 styleNames from '@pareto-engineering/bem/exports'
 
 import { Person } from './common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'people'
@@ -26,35 +26,29 @@ const People = ({
   children,
   columnWidth,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-        'u1',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--image-size'  :imageSize,
-        '--column-width':columnWidth,
-      }}
-      // {...otherProps}
-    >
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+      'u1',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--image-size'  :imageSize,
+      '--column-width':columnWidth,
+    }}
+    // {...otherProps}
+  >
+    {children}
+  </div>
+)
 
 People.propTypes = {
   /**

package/src/ui/a/Popover/Popover.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useRef, useInsertionEffect } from 'react'
+import { useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -10,6 +10,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 // Local Definitions
 import { useDynamicPosition } from 'ui/utils'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'popover'
@@ -31,10 +33,6 @@ const Popover = ({
   offsetYPx,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const popoverRef = useRef(null)
   const {
     primaryPosition,

package/src/ui/a/ProgressBar/ProgressBar.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
@@ -25,35 +25,29 @@ const ProgressBar = ({
   progress,
   height,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        attached && styleNames.modifierAttached,
-        color && `x-${color}`,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        '--progress':progress,
-        '--height'  :height,
-        ...style,
-      }}
-      data-length="50%"
-      // {...otherProps}
-    />
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      attached && styleNames.modifierAttached,
+      color && `x-${color}`,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--progress':progress,
+      '--height'  :height,
+      ...style,
+    }}
+    data-length="50%"
+    // {...otherProps}
+  />
+)
 
 ProgressBar.propTypes = {
   /**