@pareto-engineering/design-system 2.0.0-alpha.53 → 2.0.0-alpha.56

package/src/stories/f/RatingsInput.stories.jsx

@@ -23,35 +23,41 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    ratingCount        :{ control: 'number' },
+    name               :{ control: 'text' },
+    label              :{ control: 'text' },
+    showRatingValue    :{ control: 'boolean' },
+    displayRatingsLabel:{ control: 'boolean' },
+    labelMax           :{ control: 'text' },
+    labelMin           :{ control: 'text' },
   },
 }
 
-export const Base = () => (
+const Template = (args) => (
   <>
-    <RatingsInput ratingCount={5} name="ratings" label="Your Rating" />
+    <RatingsInput {...args} />
     <FormDebugger />
   </>
 )
 
-export const Numbers = () => (
-  <>
-    <RatingsInput ratingCount={10} name="ratings" showRatingValue label="Your Rating" />
-    <FormDebugger />
-  </>
-)
+export const Base = Template.bind({})
+Base.args = {
+  ratingCount:5,
+  name       :'ratings',
+  label      :'Your Rating',
+}
 
-export const Labels = () => (
-  <>
-    <RatingsInput
-      label="Your Rating"
-      labelMax="very satisfied."
-      labelMin="not satisfied."
-      ratingCount={10}
-      name="ratings"
-      showRatingValue
-      displayRatingsLabel
-    />
-    <FormDebugger />
-  </>
-)
+export const Numbers = Template.bind({})
+Numbers.args = {
+  ...Base.args,
+  showRatingValue:true,
+}
+
+export const Labels = Template.bind({})
+Labels.args = {
+  ...Numbers.args,
+  labelMax           :'very satisfied.',
+  labelMin           :'not satisfied.',
+  displayRatingsLabel:true,
+}

package/src/stories/f/SelectInput.stories.jsx

@@ -22,91 +22,52 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    disabled:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
+const Template = (args) => (
   <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={[{ value: '', label: 'Select an option', disabled: true }, 'Work', 'Managing', 'Training']}
-    />
+    <SelectInput {...args} />
     <FormDebugger />
   </>
 )
 
-export const RequiredSelect = () => {
-  const requiredInput = (inputValue) => {
-    let error = ''
-
-    if (!inputValue || !inputValue?.length === 0) {
-      error = 'This information is required'
-    }
-    return error
-  }
+export const Base = Template.bind({})
+Base.args = {
+  name   :'workType',
+  label  :'Work Type',
+  options:[
+    { value: '', label: 'Select an option', disabled: true },
+    { value: 'Work', label: 'Work' },
+    { value: 'Managing', label: 'Managing' },
+    { value: 'Training', label: 'Training' },
+  ],
+}
 
-  return (
-    <>
-      <SelectInput
-        validate={requiredInput}
-        name="activity"
-        label="Activity Type"
-        options={[
-          { value: '', label: 'Select an option', disabled: true },
-          { value: 'review', label: 'Review' },
-          { value: 'Approve', label: 'Approve' },
-        ]}
-      />
-      <FormDebugger />
-    </>
-  )
+export const StringAndObjects = Template.bind({})
+StringAndObjects.args = {
+  ...Base.args,
+  options:[...Base.args.options, 'Option1', 'Option2', 'Option3'],
 }
 
-export const Objects = () => (
-  <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={[
-        { value: '', label: 'Select an option', disabled: true },
-        { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
-        { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
-      ]}
-    />
-    <FormDebugger />
-  </>
-)
+const requiredInput = (inputValue) => {
+  let error = ''
 
-export const StringAndObjects = () => (
-  <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={[
-        { value: '', label: 'Select an option', disabled: true },
-        'Work', 'Managing', 'Training',
-        { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
-        { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
-      ]}
-    />
-    <FormDebugger />
-  </>
-)
-export const DisabledSelectInput = () => (
-  <>
-    <SelectInput
-      name="workType"
-      label="Work Type"
-      options={[
-        { value: '', label: 'Select an option', disabled: true },
-        'Work', 'Managing', 'Training',
-        { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
-        { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
-      ]}
-      disabled
-    />
-    <FormDebugger />
-  </>
-)
+  if (!inputValue || !inputValue?.length === 0) {
+    error = 'This information is required'
+  }
+  return error
+}
+export const Required = Template.bind({})
+Required.args = {
+  ...Base.args,
+  validate:requiredInput,
+}
+
+export const DisabledSelectInput = Template.bind({})
+DisabledSelectInput.args = {
+  ...Base.args,
+  disabled:true,
+}

package/src/stories/f/TextInput.stories.jsx

@@ -26,65 +26,74 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    placeholder :{ control: 'text' },
+    autoComplete:{ control: 'select', options: ['off', 'on'] },
+    disabled    :{ control: 'boolean' },
+    type        :{ control: 'text' },
+    name        :{ control: 'text' },
+    label       :{ control: 'text' },
   },
 }
 
-export const Base = () => {
-  const validate = (value) => {
-    let errorMessage = ''
-    const isValid = value.length > 3
+// eslint-disable-next-line react/prop-types
+const Template = (args) => (
+  <div className=" u2 pb-u">
+    <TextInput {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'firstName',
+  label:"What's your first name ?",
+}
+
+const validate = (value) => {
+  let errorMessage = ''
+  const isValid = value.length > 3
 
-    if (!isValid) {
-      errorMessage = 'Value should be greater than 3 characters'
-    }
-    return errorMessage
+  if (!isValid) {
+    errorMessage = 'Value should be greater than 3 characters'
   }
-  return (
-    <div className=" u2 pb-u">
-      <TextInput
-        name="firstName"
-        label="What's your first name ?"
-        validate={validate}
-      />
-      <FormDebugger />
-    </div>
-  )
+  return errorMessage
 }
 
-export const Placeholder = () => (
-  <div className="u2 pb-u">
-    <TextInput
-      name="firstName"
-      label="What's your first name ?"
-      placeholder="First Name"
-    />
-    <FormDebugger />
-  </div>
-)
+export const WithValidation = Template.bind({})
+WithValidation.args = {
+  ...Base.args,
+  validate,
+}
 
-export const Disabled = () => (
-  <div className="u2 pb-u">
-    <TextInput
-      name="firstName"
-      label="What's your first name ?"
-      disabled
-    />
-  </div>
-)
+export const WithPlaceholder = Template.bind({})
+WithPlaceholder.args = {
+  ...Base.args,
+  placeholder:'First Name',
+}
 
-export const DateTime = () => (
-  <div>
-    <TextInput
-      name="date"
-      label="Select date"
-      type="date"
-    />
-    <TextInput
-      name="time"
-      label="Select time"
-      type="time"
-    />
-    <FormDebugger />
-  </div>
-)
+export const WithAutoCompleteOff = Template.bind({})
+WithAutoCompleteOff.args = {
+  ...Base.args,
+  autoComplete:'off',
+}
+
+export const WithDisabled = Template.bind({})
+WithDisabled.args = {
+  ...Base.args,
+  disabled:true,
+}
+
+export const Date = Template.bind({})
+Date.args = {
+  type :'date',
+  name :'date',
+  label:'Select date',
+}
+
+export const Time = Template.bind({})
+Time.args = {
+  type :'time',
+  name :'time',
+  label:'Select time',
+}

package/src/stories/f/TextareaInput.stories.jsx

@@ -24,62 +24,52 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    name              :{ control: 'text' },
+    label             :{ control: 'text' },
+    placeholder       :{ control: 'text' },
+    disabled          :{ control: 'boolean' },
+    labelAsDescription:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <div>
-    <TextareaInput
-      name="feedback"
-      label="What can we improve on?"
-    />
+const Template = (args) => (
+  <>
+    <TextareaInput {...args} />
     <FormDebugger />
-  </div>
+  </>
 )
 
-export const Placeholder = () => (
-  <div>
-    <TextareaInput
-      name="feedback"
-      label="What can we improve on?"
-      placeholder="Type your feedback here..."
-    />
-    <FormDebugger />
-  </div>
-)
+export const Base = Template.bind({})
+Base.args = {
+  name :'feedback',
+  label:'What can we improve on?',
+}
+
+export const Placeholder = Template.bind({})
+Placeholder.args = {
+  ...Base.args,
+  placeholder:'Type your feedback here...',
+}
 
-export const Validation = () => {
-  const validate = (value) => {
-    let errorMessage = ''
-    const isValid = value.length > 3
+const validate = (value) => {
+  let errorMessage = ''
+  const isValid = value.length > 3
 
-    if (!isValid) {
-      errorMessage = 'Value should be greater than 3 characters'
-    }
-    return errorMessage
+  if (!isValid) {
+    errorMessage = 'Value should be greater than 3 characters'
   }
+  return errorMessage
+}
 
-  return (
-    <div>
-      <TextareaInput
-        name="feedback"
-        label="What can we improve on?"
-        placeholder="Type your feedback here..."
-        validate={validate}
-      />
-      <FormDebugger />
-    </div>
-  )
+export const Validation = Template.bind({})
+Validation.args = {
+  ...Base.args,
+  validate,
 }
 
-export const Disabled = () => (
-  <div>
-    <TextareaInput
-      name="feedback"
-      label="What can we improve on?"
-      disabled
-    />
-    <FormDebugger />
-  </div>
-)
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Base.args,
+  disabled:true,
+}

package/src/ui/a/Alert/Alert.jsx

@@ -0,0 +1,144 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useEffect, useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { Button } from 'ui/b'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'alert'
+
+/**
+ * This is the component description.
+ */
+const Alert = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  type,
+  withCloseIcon,
+  primaryPosition,
+  secondaryPosition,
+  autoCloseMs,
+  width,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [hideAlert, setHideAlert] = useState(false)
+
+  const handleCloseAlert = () => setHideAlert(true)
+
+  useEffect(() => {
+    if (autoCloseMs) {
+      setTimeout(() => {
+        setHideAlert(true)
+      }, autoCloseMs)
+    }
+  }, [autoCloseMs])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `x-${type}`,
+        hideAlert && 'hide',
+        primaryPosition,
+        secondaryPosition,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--width':width,
+      }}
+      // {...otherProps}
+    >
+      <div className="bar" />
+      {withCloseIcon && (
+      <div className="close">
+        <Button isSimple color="heading" onClick={handleCloseAlert}>
+          <span className="f-icons">Y</span>
+        </Button>
+      </div>
+      )}
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+Alert.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,
+
+  /**
+   *  Whether the alert should have a close Icon
+   */
+  withCloseIcon:PropTypes.bool,
+
+  /**
+   *  The primary position of the alert
+   */
+  primaryPosition:PropTypes.oneOf(['top', 'bottom', 'center']),
+
+  /**
+   *  The secondary position of the alert
+   */
+  secondaryPosition:PropTypes.oneOf(['left', 'right']),
+
+  /**
+   *  The number milisseconds to wait for before closing the alert
+   */
+  autoCloseMs:PropTypes.number,
+
+  /**
+   *  The type of the alert
+   */
+  type:PropTypes.oneOf(['success', 'warning', 'error']),
+
+  /**
+   *  The width of the alert
+   */
+  width:PropTypes.number,
+}
+
+Alert.defaultProps = {
+  withCloseIcon  :true,
+  primaryPosition:'top',
+}
+
+export default Alert

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

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

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

@@ -0,0 +1,74 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-padding: 1em;
+$default-bar-height: .3em;
+$default-alert-desktop-width: var(--width, 30em);
+
+.#{bem.$base}.alert {
+    border: var(--theme-border);
+    padding-bottom: $default-padding * 1.5;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+
+    &.center {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &.top {
+        top: 0;
+    }
+
+    &.bottom {
+        bottom: 0;
+    }
+
+    &.right {
+        right: 0;
+    }
+
+    &.left {
+        left: 0;
+    }
+
+    &.hide {
+        display: none;
+    }
+
+    >.bar {
+        background-color: var(--x);
+        height: $default-bar-height;
+    }
+
+    >.close {
+        display: flex;
+        justify-content: flex-end;
+
+        span {
+            padding: $default-padding / 2;
+            font-size: calc(var(--s-2) * 1em);
+        }
+    }
+
+    .bar+.content {
+        padding-top: $default-padding * 1.5;
+    }
+
+    >.content {
+        padding-inline: $default-padding;
+
+        .icon {
+            color: var(--x)
+        }
+    }
+
+    // Desktop styles
+    @include mixins.media($from: $sm-md) {
+        width: $default-alert-desktop-width;
+    }
+}

package/src/ui/a/index.js

@@ -29,3 +29,4 @@ export { SnapScroller } from './SnapScroller'
 export { BackgroundGradient } from './BackgroundGradient'
 export { ContentTree } from './ContentTree'
 export { Popover } from './Popover'
+export { Alert } from './Alert'

package/src/ui/f/FormInput/FormInput.jsx

@@ -127,6 +127,7 @@ FormInput.propTypes = {
     'choices',
     'textarea',
     'query-combobox',
+    'url',
     // to be removed
     'extendedTypeInput',
   ]),