freemium-survey-components 0.1.0

package/src/components/nps/style.css

@@ -0,0 +1,154 @@
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+.title {
+  color: var(--color-elephant-900);
+  font-weight: 600;
+}
+
+.footer {
+  margin-top: 20px;
+  border-top: 1px solid var(--color-smoke-50);
+  padding-top: 20px;
+  display: flex;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.widget span {
+  color: #aaa;
+  font-size: 12px;
+}
+.widget button {
+  display: inline-block;
+  font-size: 16px;
+  white-space: nowrap;
+  vertical-align: middle;
+  background: none;
+  border: none;
+  box-shadow: none;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 500;
+  border-radius: 4px;
+  margin: 0;
+  outline: none;
+  margin-left: -1px;
+  width: 40px;
+  height: 40px;
+  transform: scale(1);
+  transition: background 0.2s ease-in, color 0.2s ease-in,
+    border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);
+}
+.widget button:hover {
+  color: white;
+  transform: scale(1.15);
+  z-index: 2;
+  position: relative;
+}
+.widget button.active {
+  color: white;
+  transform: scale(1.15);
+  z-index: 2;
+  position: relative;
+}
+
+.choices {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.choice.active,
+.choice:hover:nth-child(1) {
+  background: #eb5b56;
+}
+.choice.active,
+.choice:hover:nth-child(2) {
+  background: #fb8774;
+}
+.choice.active,
+.choice:hover:nth-child(3) {
+  background: #f58f6b;
+}
+.choice.active,
+.choice:hover:nth-child(4) {
+  background: #f6996a;
+}
+.choice.active,
+.choice:hover:nth-child(5) {
+  background: #eab268;
+}
+.choice.active,
+.choice:hover:nth-child(6) {
+  background: #cebb69;
+}
+.choice.active,
+.choice:hover:nth-child(7) {
+  background: #bdc46c;
+}
+.choice.active,
+.choice:hover:nth-child(8) {
+  background: #a4cd72;
+}
+.choice.active,
+.choice:hover:nth-child(9) {
+  background: #77c955;
+}
+.choice.active,
+.choice:hover:nth-child(10) {
+  background: #37c248;
+}
+
+.widget.highlighted button.active,
+.widget.highlighted button:hover {
+  background: var(--color-elephant-800) !important;
+}
+.widget .rounded button {
+  border-radius: 100%;
+}
+.widget .boxed button {
+  border-radius: 0;
+}
+.widget {
+  padding: 35px 0;
+  box-sizing: border-box;
+  position: relative;
+  padding-bottom: 30px;
+}
+.widget .button-container {
+  display: flex;
+  justify-content: space-between;
+  background: var(--color-smoke-50);
+}
+.widget .positive-text,
+.widget .negative-text {
+  position: absolute;
+  color: var(--color-elephant-500);
+}
+.widget .positive-text {
+  right: 0px;
+  bottom: 5px;
+  text-align: right;
+}
+.widget .negative-text {
+  left: 0;
+  bottom: 5px;
+  text-align: left;
+}
+@media (max-width: 550px) {
+  .widget .button-container {
+    background: transparent;
+  }
+  .widget .choices {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 16px;
+    background: transparent;
+  }
+  .widget button {
+    border-radius: 50%;
+    background: #ebeff3;
+  }
+}

package/src/components/progressbar/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import './style.css'
+interface ProgressBarProps {
+  totalSteps: number
+  completedSteps: number
+}
+const ProgressBar = (props: ProgressBarProps) => {
+  const {totalSteps, completedSteps} = props
+  return (
+    <div className="progressbar-container">
+      <div
+        className="progressbar"
+        style={{
+          width: `${completedSteps > 0 ? 100 / totalSteps : 0}%`,
+          transform: `scaleX(${completedSteps})`,
+        }}
+      ></div>
+    </div>
+  )
+}
+export {ProgressBar}

package/src/components/progressbar/progressbar.stories.tsx

@@ -0,0 +1,22 @@
+import {withKnobs} from '@storybook/addon-knobs'
+import {storiesOf} from '@storybook/react'
+import React from 'react'
+import {ProgressBar} from './'
+import {useState} from '@storybook/addons'
+
+const stories = storiesOf('ProgressBar', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator((story) => {
+  return <div style={{margin: '50px'}}>{story()}</div>
+})
+
+stories.add('Basic', () => {
+  const [completedSteps, set] = useState(0)
+  return (
+    <>
+      <ProgressBar totalSteps={10} completedSteps={completedSteps} />
+      <div style={{marginTop: '40px'}}></div>
+      <button onClick={() => set(completedSteps + 1)}>Complete step</button>
+    </>
+  )
+})

package/src/components/progressbar/style.css

@@ -0,0 +1,14 @@
+.progressbar-container {
+  width: 100%;
+  height: 6px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.progressbar {
+  transition: transform 0.25s linear;
+  transform-origin: left;
+  height: 100%;
+  background-color: var(--brand-color);
+}

package/src/components/radio-button/index.tsx

@@ -0,0 +1,66 @@
+import React, {Children, forwardRef} from 'react'
+import {withDefaults} from '../../utils'
+import './style.css'
+interface RadioButtonProps {
+  checked: boolean
+  children: string
+  value: string | number
+  name: string
+  onChange: (e: any) => void
+  id?: string
+}
+const defaultProps = {
+  checked: false,
+}
+interface RadioGroupInterface {
+  options: Array<{id: string; name?: string; label: string}>
+  value: string
+  name: string
+  onChangeHandler: (newValue: string) => void
+}
+const RadioGroup = ({
+  name,
+  options,
+  value,
+  onChangeHandler,
+}: RadioGroupInterface) => {
+  return (
+    <div className="radio-group">
+      {options.map((option) => (
+        <Radio
+          key={option.id}
+          value={option.id}
+          name={name}
+          onChange={(e) => {
+            onChangeHandler(e.currentTarget.value)
+          }}
+          checked={value === option.id}
+        >
+          {option.label}
+        </Radio>
+      ))}
+    </div>
+  )
+}
+const RadioComponent = forwardRef(
+  (props: RadioButtonProps, ref?: React.Ref<HTMLInputElement>) => {
+    return (
+      <label className="radio-label">
+        <input
+          ref={ref}
+          type="radio"
+          name={props.name}
+          value={props.value}
+          checked={props.checked}
+          onClick={props.onChange}
+          autoFocus={true}
+        />
+        <div className="radio" />
+        <div>{props.children}</div>
+      </label>
+    )
+  },
+)
+
+const Radio = withDefaults(RadioComponent, defaultProps)
+export {Radio, RadioGroup}

package/src/components/radio-button/radio.stories.tsx

@@ -0,0 +1,26 @@
+import {withKnobs} from '@storybook/addon-knobs'
+import {storiesOf} from '@storybook/react'
+import React from 'react'
+import {Radio, RadioGroup} from './'
+import {useState} from '@storybook/addons'
+
+const stories = storiesOf('Radio', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator((story) => {
+  return <div style={{margin: '50px'}}>{story()}</div>
+})
+
+stories.add('basic radio button', () => {
+  const [checked, setChecked] = useState('')
+  return (
+    <RadioGroup
+      name="radio-group"
+      value={checked}
+      onChangeHandler={(value) => setChecked(value)}
+      options={[
+        {id: 'checkA', label: 'Option A'},
+        {id: 'checkB', label: 'Option B'},
+      ]}
+    />
+  )
+})

package/src/components/radio-button/style.css

@@ -0,0 +1,60 @@
+.radio-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  white-space: nowrap;
+  flex-direction: column;
+}
+
+.radio {
+  background-color: #fff;
+  border: 1px solid;
+  border-color: var(--input-border-color);
+  transition: background-color ease-in 0.2s;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  position: relative;
+  margin-right: 12px;
+}
+.radio:before {
+  left: 3px;
+  top: 3px;
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transition: all ease-in 0.2s;
+  background-color: #fff;
+}
+.radio-label {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 16px;
+  min-width: 200px;
+  border: 1px solid #ebeff3;
+  box-shadow: 0px 2px 5px rgb(18 52 77 / 10%);
+  border-radius: 4px;
+}
+input[type='radio'] {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+input[type='radio']:focus ~ .radio {
+  /* box-shadow: ${pseudo.focus} 0px 0px 0px 3px; */
+  box-shadow: var(--input-highlight-color) 0px 0px 0px 3px;
+  border-color: transparent;
+}
+
+input[type='radio']:checked ~ .radio:before {
+  background-color: var(--input-highlight-color);
+}
+.radio-container:hover .radio {
+  border-color: var(--input-highlight-color);
+  box-shadow: var(--focus-box-shadow-color) 0px 0px 0px 5px;
+}

package/src/components/text-input/index.tsx

@@ -0,0 +1,155 @@
+import React, {forwardRef} from 'react'
+import {withDefaults} from '../../utils'
+import './style.css'
+
+interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
+  isErrored?: boolean
+  showCount?: boolean
+  errorText?: string
+  maxLength?: any
+  type?: string
+  label: string
+  style?: any
+  value?: any
+  inputStyle?: any
+  className?: string
+  startLabel?: React.ReactNode | any
+  endLabel?: React.ReactNode | any
+  isRequired?: boolean
+  inline?: boolean
+}
+
+interface TextAreaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
+  isErrored: boolean
+  showCount?: boolean
+  maxLength?: any
+  errorText?: string
+  style?: any
+  value?: any
+  inputStyle?: any
+  className?: string
+  label: string
+  startLabel?: React.ReactNode | any
+  startAdornment?: React.ReactNode | any
+  endLabel?: React.ReactNode | any
+  endAdornment?: React.ReactNode | any
+  isRequired?: boolean
+  inline?: boolean
+}
+
+const defaultProps = {
+  isRequired: false,
+  showCount: false,
+  isErrored: false,
+  inline: false,
+  spellCheck: false,
+  autoFocus: false,
+}
+
+const InputComponent = forwardRef(
+  (props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
+    const {
+      inputStyle,
+      style,
+      className,
+      showCount,
+      isErrored,
+      startLabel,
+      isRequired,
+      errorText,
+      endLabel,
+      maxLength,
+      ...rest
+    } = props
+    console.log(props.value)
+    return (
+      <div className="input-container" style={style}>
+        {props.label && (
+          <label className={`input-label ${isRequired ? 'required' : ''}`}>
+            {props.label}
+          </label>
+        )}
+        <div>
+          {startLabel && <div className="start-label">{startLabel}</div>}
+          <div
+            className={`input-basic ${isErrored ? 'error' : ''}${
+              className || ''
+            }`}
+          >
+            <input
+              type="text"
+              autoComplete="off"
+              {...rest}
+              ref={ref}
+              style={inputStyle}
+            />
+            {showCount && maxLength > 0 && (
+              <div className="end-max-length">{`${
+                (props.value && props.value.length) || 0
+              }/${props.maxLength}`}</div>
+            )}
+          </div>
+          {endLabel && <div className="end-label">{endLabel}</div>}
+        </div>
+        {isErrored && errorText && (
+          <span className="input-error">{props.errorText}</span>
+        )}
+      </div>
+    )
+  },
+)
+
+const TextAreaComponent = forwardRef(
+  (props: TextAreaProps, ref?: React.Ref<HTMLTextAreaElement>) => {
+    const {
+      inputStyle,
+      style,
+      className,
+      showCount,
+      maxLength,
+      isErrored,
+      startLabel,
+      isRequired,
+      ...rest
+    } = props
+    console.log(props.value)
+    return (
+      <>
+        <div className="textarea-container" style={style}>
+          {props.label && (
+            <label className={`input-label ${isRequired ? 'required' : ''}`}>
+              {props.label}
+            </label>
+          )}
+          {startLabel && <div className="start-label">{startLabel}</div>}
+          <div
+            className={`input-basic ${isErrored ? 'error' : ''} ${
+              className || ''
+            }`}
+          >
+            <textarea
+              autoComplete="off"
+              {...rest}
+              ref={ref}
+              style={inputStyle}
+            />
+            {showCount && maxLength && maxLength > 0 && (
+              <div className="end-max-length">{`${
+                (props.value && props.value.length) || 0
+              }/${props.maxLength}`}</div>
+            )}
+          </div>
+          {props.endLabel && <div className="end-label">{props.endLabel}</div>}
+        </div>
+        {props.isErrored && props.errorText && (
+          <span className="input-error">{props.errorText}</span>
+        )}
+      </>
+    )
+  },
+)
+
+const Input = withDefaults(InputComponent, defaultProps)
+const TextArea = withDefaults(TextAreaComponent, defaultProps)
+
+export {Input, TextArea}

package/src/components/text-input/style.css

@@ -0,0 +1,102 @@
+.input-container,
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 4px;
+  position: relative;
+}
+label.input-label {
+  display: inline-block;
+  padding-bottom: 8px;
+  padding-left: 2px;
+  font-size: 12px;
+  font-weight: 400;
+}
+label.required::after {
+  content: '*';
+  position: relative;
+  top: 2px;
+  font-weight: 500;
+  font-size: 0.85rem;
+  padding-left: 3px;
+  color: var(--error-highlight-color);
+}
+
+.input-basic {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--input-border-color);
+  transition: border-color 0.2s linear;
+  background: #fff;
+}
+.textarea-container .input-basic {
+  flex-direction: column;
+  align-items: unset;
+}
+.input-basic.error {
+  border: 1px solid var(--error-highlight-color);
+}
+.input-basic.error:hover {
+  border: 1px solid var(--error-highlight-color);
+}
+.input-basic.error:focus-within {
+  box-shadow: none;
+}
+.input-basic:hover {
+  border-color: var(--input-hover-border-color);
+  transition: 0.2s linear;
+}
+.input-basic:focus-within {
+  border: 1px solid transparent;
+  box-shadow: 0 0 0 2px var(--input-highlight-color);
+}
+.end-max-length {
+  padding: 0 8px;
+  font-size: 0.85rem;
+}
+.textarea-container .end-max-length {
+  padding: 8px;
+  align-self: flex-end;
+}
+span.input-error {
+  display: block;
+  padding-left: 2px;
+  padding-top: 4px;
+  font-size: 0.9rem;
+  color: var(--error-highlight-color);
+}
+input[type='text'] {
+  padding: 4px 12px;
+  flex: 1;
+  border: unset;
+  height: 32px;
+  font-size: 1rem;
+  /* line-height: ${typography.input.text.lineHeight}; */
+  font-weight: 500;
+  border-radius: 4px;
+}
+input[type='text'],
+textarea {
+  outline: none;
+  border: none;
+}
+input[type='text']::placeholder {
+  color: var(--input-placeholder-color);
+}
+textarea {
+  min-height: 116px;
+  padding: 4px 12px;
+  flex: 1;
+  border: unset;
+  resize: none;
+  font-size: 1rem;
+  /* line-height: ${typography.input.text.lineHeight}; */
+  font-weight: 500;
+  border-radius: 4px;
+}
+textarea::placeholder {
+  color: var(--input-placeholder-color);
+}

package/src/components/text-input/text-input.stories.tsx

@@ -0,0 +1,84 @@
+import {withKnobs} from '@storybook/addon-knobs'
+import {storiesOf} from '@storybook/react'
+import React from 'react'
+import {Input, TextArea} from '.'
+
+const stories = storiesOf('Input', module)
+
+stories.addDecorator(withKnobs)
+stories.addDecorator((story) => {
+  return <div style={{padding: '50px'}}>{story()}</div>
+})
+
+stories.add('Input', () => {
+  const [value, setValue] = React.useState('')
+  return (
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+      <Input placeholder="Normal input" label="Standard input element" />
+      &nbsp;&nbsp;
+      <Input
+        placeholder="Accepts 10 chars"
+        maxLength={10}
+        showCount={true}
+        value={value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setValue(e.target.value)
+        }
+        label="Max Length - showCount false"
+      />
+      &nbsp;&nbsp;
+      <Input
+        placeholder="Accepts 10 chars"
+        maxLength={10}
+        value={value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setValue(e.target.value)
+        }
+        label="Max Length - showCount true"
+      />
+      &nbsp;&nbsp;
+      <Input
+        placeholder="Required input"
+        label="Required element"
+        isRequired={true}
+      />
+      &nbsp;&nbsp;
+      <Input
+        inline={true}
+        isErrored={true}
+        placeholder="Errored input"
+        label="errored input element"
+      />{' '}
+      &nbsp;&nbsp; &nbsp;&nbsp;
+      <Input
+        inline={true}
+        isErrored={true}
+        errorText="Field is required"
+        placeholder="Errored input with msg"
+        label="With error text"
+      />{' '}
+      &nbsp;&nbsp; &nbsp;&nbsp;
+    </div>
+  )
+})
+
+stories.add('TextArea', () => (
+  <div style={{display: 'flex', flexDirection: 'column'}}>
+    <TextArea placeholder="Normal input" label="Standard input element" />
+    &nbsp;&nbsp;
+    <TextArea
+      placeholder="Required input"
+      label="Required element"
+      isRequired={true}
+    />
+    &nbsp;&nbsp;
+    <TextArea
+      inline={true}
+      placeholder="Constrained input"
+      label="Input element with max length"
+      showCount={true}
+      maxLength={100}
+    />{' '}
+    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
+  </div>
+))

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './survey'