@pareto-engineering/design-system 4.0.0-alpha.23 → 4.0.0-alpha.24

package/src/stories/a/BlurOverlay.stories.jsx

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import { BlurOverlay } from 'ui'
+
+export default {
+  title        :'a/BlurOverlay',
+  component    :BlurOverlay,
+  subcomponents:{
+    // Item:BlurOverlay.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{},
+  controls:{
+    blur:{ type: 'boolean' },
+  },
+}
+
+export const Base = (args) => (
+  <BlurOverlay {...args}>
+    <div style={{
+      height         :'100px',
+      bottom         :'0',
+      minWidth       :'100%',
+      position       :'fixed',
+      backgroundColor:'blue',
+      color          :'white',
+    }}
+    >
+      Sample Foreground Component
+    </div>
+  </BlurOverlay>
+
+)
+Base.args = {
+  blur:true,
+}

package/src/stories/b/Button/WithLink.stories.jsx

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Button } from 'ui'
+
+import { ALL_COLORS } from 'stories/colors'
+import commonDecorators from '@pareto-engineering/utils/src/storybook/decorators'
+
+export default {
+  title     :'b/Button/WithLink',
+  component :Button.WithLink,
+  decorators:[
+    commonDecorators.router,
+  ],
+
+  argTypes:{
+    path:{ control: { type: 'text' } },
+  },
+}
+
+const Template = (args) => (
+  <Button.Group>
+    {
+      ALL_COLORS.map((colorName) => (
+        <Button.WithLink {...args} color={colorName} key={colorName}>
+          This is a
+          {' '}
+          {colorName}
+          {' '}
+          button
+        </Button.WithLink>
+      ))
+    }
+  </Button.Group>
+)
+
+export const Base = Template.bind({})
+Base.args = { path: '/' }

package/src/ui/a/BlurOverlay/BlurOverlay.jsx

@@ -0,0 +1,75 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import { useInsertionEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'blur-overlay'
+
+const BlurOverlay = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  blur,
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        blur && styleNames.modifierActive,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      { children }
+    </div>
+  )
+}
+
+BlurOverlay.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   *  Boolean to toggle blur effect
+   */
+  blur:PropTypes.bool,
+}
+
+BlurOverlay.defaultProps = {
+  blur:true,
+  // someProp:false
+}
+
+export default BlurOverlay

package/src/ui/a/BlurOverlay/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as BlurOverlay } from './BlurOverlay'

package/src/ui/a/BlurOverlay/styles.scss

@@ -0,0 +1,31 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.blur-overlay {
+  background: inherit;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+  &.#{bem.$modifier-active} {
+    animation: blurAnimation .3s ease-in-out;
+    backdrop-filter: blur(5px);
+    height: 100%;
+  }
+}
+
+@keyframes blurAnimation {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  1% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

package/src/ui/a/index.js

@@ -1,6 +1,7 @@
 export {
   AppContext, AppContextProvider, useApp, useTheme,
 } from './AppContext'
+export { BlurOverlay } from './BlurOverlay'
 export { ContentTree } from './ContentTree'
 export { Conversation } from './Conversation'
 export { DotInfo } from './DotInfo'

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

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types'
 // Package-level Imports
 import styleNames from '@pareto-engineering/bem/exports'
 import { LoadingCircle } from 'ui'
-import { Group } from './common'
+import { Group, WithLink } from './common'
 import './styles.scss'
 
 // Helper Definition
@@ -135,5 +135,6 @@ Button.defaultProps = {
 }
 
 Button.Group = Group
+Button.WithLink = WithLink
 
 export default Button

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

@@ -0,0 +1,80 @@
+/* @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 { Link } from 'react-router-dom'
+import { Button } from '../../index'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'button-with-link'
+
+const WithLink = ({
+  id,
+  className: userClassName,
+  children,
+  path,
+  ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <Link
+      to={path}
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <Button
+        {...otherProps}
+      >
+        {children}
+      </Button>
+    </Link>
+  )
+}
+
+WithLink.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * The path that this link would point to
+   */
+  path:PropTypes.string,
+}
+
+WithLink.defaultProps = {
+}
+
+export default WithLink

package/src/ui/b/Button/common/WithLink/index.js

@@ -0,0 +1 @@
+export { default as WithLink } from './WithLink'

package/src/ui/b/Button/common/WithLink/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.button-with-link {
+  text-decoration: none;
+}

package/src/ui/b/Button/common/index.js

@@ -1 +1,2 @@
 export { Group } from './Group'
+export { WithLink } from './WithLink'

package/src/ui/b/Button/styles.scss

@@ -113,8 +113,8 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      border: 1px solid var(--x, var(--#{$default-color}));
-      color: var(--x, var(--#{$default-color}));
+      border: 1px solid var(--hard-disabled, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
@@ -150,12 +150,12 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      color: var(--x, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
   &:disabled {
-    background: var(--x);
+    background: var(--hard-disabled);
     filter: brightness(125%);
   }
 }

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

@@ -36,7 +36,9 @@ const ThemeSelector = ({
   },
   [userTheme])
 
-  const themeText = userTheme && userTheme.charAt(0).toUpperCase() + userTheme.slice(1)
+  const current = userTheme ? themes.indexOf(userTheme) : 0
+  const nextTheme = themes[(current + 1) % themes.length]
+  const themeText = nextTheme && nextTheme.charAt(0).toUpperCase() + nextTheme.slice(1)
 
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/no-static-element-interactions

package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx

@@ -35,7 +35,8 @@ const ChoicesInput = ({
   optional,
   disabled,
   description,
-  // ...otherProps
+  spaceBetween,
+  ...otherProps
 }) => {
   useInsertionEffect(() => {
     import('./styles.scss')
@@ -67,7 +68,7 @@ const ChoicesInput = ({
         {label}
       </FormLabel>
       )}
-      <div className="choices">
+      <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
         { options.map((choice) => (
           <Choice
             labelClassName="with-faded-border"
@@ -77,6 +78,7 @@ const ChoicesInput = ({
             multiple={multiple}
             validate={validate}
             disabled={disabled}
+            {...otherProps}
             {...choice}
           />
         ))}

package/src/ui/f/fields/ChoicesInput/styles.scss

@@ -16,6 +16,10 @@ $default-label-height: .5em;
     flex-wrap: wrap;
     gap: $default-flex-separator;
 
+    &.space-between {
+      justify-content: space-between;
+    }
+
     >.choice {
       display: flex;
 

package/src/ui/f/fields/TextInput/styles.scss

@@ -8,7 +8,7 @@ $default-symbol-left: 1em;
 $default-padding-with-symbol:
   .75em
   calc($default-symbol-left - 1em)
-  .55em
+  .75em
   calc($default-symbol-left + 1em);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
@@ -30,7 +30,8 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
         content: var(--symbol);
         left: $default-symbol-left;
         position: absolute;
-        top: .5em;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
 
       input {