freemium-survey-components 0.1.0

package/src/survey/style.css

@@ -0,0 +1,58 @@
+.question-container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  max-width: 700px;
+  margin: 0 auto;
+  align-items: center;
+  background: #ffffff;
+  border-radius: 4px;
+  transition: transform 400ms ease 0ms, opacity 200ms ease 0ms;
+  box-shadow: 0px 2px 16px rgba(18, 52, 77, 0.1);
+  margin-bottom: 40px;
+  padding: 20px;
+  gap: 28px;
+}
+.question-text {
+  font-size: 1.1rem;
+  line-height: 1.5;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+}
+.skip-button {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  min-width: 40px;
+  padding: 4px 12px;
+  border-radius: 4px;
+}
+
+.next-button {
+  margin: 0 auto;
+}
+.submit {
+  padding-bottom: 40px;
+  display: flex;
+  justify-content: center;
+}
+.responsive-text-field {
+  width: 100%;
+}
+.responsive-text-field .textarea-container {
+  display: none;
+}
+
+@media (max-width: 550px) {
+  .responsive-text-field .input-container {
+    display: none;
+  }
+  .responsive-text-field .textarea-container {
+    display: flex;
+  }
+}

package/src/survey/survey.stories.tsx

@@ -0,0 +1,28 @@
+import {
+  // boolean,
+  // select,
+  // text,
+  withKnobs,
+} from '@storybook/addon-knobs'
+import {storiesOf} from '@storybook/react'
+import React from 'react'
+import Survey from '.'
+import WidgetSurvey from './widget'
+import mockSurvey from '../mock'
+
+const stories = storiesOf('Survey', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator((story) => {
+  return <div style={{margin: '50px'}}>{story()}</div>
+})
+
+stories.add('Desktop', () => (
+  <Survey survey={mockSurvey} onSubmit={(data) => console.log(data)} />
+))
+stories.add('Widget', () => (
+  <div style={{width: '400px', margin: '0 auto'}}>
+    <WidgetSurvey>
+      <Survey survey={mockSurvey} />
+    </WidgetSurvey>
+  </div>
+))

package/src/survey/widget.css

@@ -0,0 +1,46 @@
+.widget-container {
+  width: 360px;
+  height: 360px;
+  border: 1px solid;
+  position: relative;
+}
+.widget-container .question-container {
+  box-shadow: none;
+  margin-bottom: 0;
+}
+.widget-container .widget {
+  padding-bottom: 24px !important;
+  padding-top: 0px !important;
+}
+.widget-header {
+  width: 100%;
+  height: 32px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+}
+.icons {
+  position: absolute;
+  right: 12px;
+  top: 6px;
+}
+.widget-footer {
+  border-top: 1px solid #d3d3d3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 100%;
+  font-size: 0.85rem;
+  position: absolute;
+  bottom: 0;
+}
+.widget-container .checkbox-container {
+  padding: 8px 16px;
+}
+.widget-container .radio-container {
+  padding: 8px 16px;
+}
+.widget-container .checkbox-group {
+  gap: 12px;
+}

package/src/survey/widget.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import './widget.css'
+const WidgetSurvey = ({children}: any) => {
+  return (
+    <div className="widget-container">
+      <div className="widget-header">
+        <div className="icons">
+          <span>-</span>&nbsp;&nbsp;&nbsp;&nbsp;
+          <span>x</span>
+        </div>
+      </div>
+      <div className="widget-body">{children}</div>
+      <div className="widget-footer">Powered by Freshsurvey</div>
+    </div>
+  )
+}
+export default WidgetSurvey

package/src/theme/index.css

@@ -0,0 +1,72 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/* 2. Remove default margin for common elements */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+ul,
+ol,
+dl,
+dt,
+dd {
+  margin: 0;
+}
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100%;
+  background-color: #faebd70f;
+}
+
+/* 5. Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+/* 6. Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+:root {
+  --error-highlight-color: #d72d30;
+  --focus-box-shadow-color: #ebeff3;
+  --input-border-color: #92a2b1;
+}
+
+:root {
+  --primary-button-color: #d72d30;
+  --primary-button-hover-color: #f1171b;
+  --brand-color: #d72d30;
+  --input-highlight-color: #2c5cc5;
+  --input-border-color: #92a2b1;
+  --input-hover-border-color: #264966;
+  --input-placeholder-color: #92a2b1;
+  --border-radius: 4px;
+
+  --color-milk: #fff;
+  --color-elephant-900: #12344d;
+  --color-elephant-800: #264966;
+  --color-elephant-700: #345c7c;
+  --color-elephant-600: #447093;
+  --color-smoke-700: #475867;
+  --color-smoke-300: #92a2b1;
+  --color-smoke-100: #cfd7df;
+  --color-smoke-50: #ebeff3;
+  --color-smoke-25: #f3f5f7;
+}

package/src/typings/index.d.ts

@@ -0,0 +1 @@
+export {}

package/src/utils.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const withDefaults = <P, DP>(
+  component: React.ComponentType<P>,
+  defaultProps: DP,
+) => {
+  type Props = Partial<DP> & Omit<P, keyof DP>
+  component.defaultProps = defaultProps
+  return component as React.ComponentType<Props>
+}
+
+export {withDefaults}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "lib/types",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "noImplicitAny": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.stories.tsx"]
+}