@modernpoacher/gremlins 0.0.310 → 1.0.0

package/src/js/super/gremlins/index.jsx

@@ -0,0 +1,176 @@
+/**
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Super.Gremlins.FieldGremlinProps} FieldGremlinProps
+ *  @typedef {GremlinsTypes.Super.Gremlins.GroupGremlinProps} GroupGremlinProps
+ */
+
+/**
+ *  FieldGremlin component
+ *  GroupGremlin component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import Field from '#gremlins/super/components/field'
+import Group from '#gremlins/super/components/group'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
+
+export class FieldGremlin extends Component {
+  getClassName () {
+    const {
+      required = false,
+      disabled = false,
+      readOnly = false
+    } = this.props
+
+    return classnames('gremlin', { required, disabled, readOnly })
+  }
+
+  getId () {
+    const {
+      id,
+      name
+    } = this.props
+
+    return id || name
+  }
+
+  /**
+   *  @param {FieldGremlinProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.name !== this.props.name) ||
+      (props.id !== this.props.id) ||
+      (props.value !== this.props.value) ||
+      (props.required !== this.props.required) ||
+      (props.disabled !== this.props.disabled) ||
+      (props.readOnly !== this.props.readOnly) ||
+      (props.tabIndex !== this.props.tabIndex) ||
+      (props.accessKey !== this.props.accessKey) ||
+      (props.placeholder !== this.props.placeholder) ||
+      (props.onChange !== this.props.onChange)
+    )
+  }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      value,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      onChange = DEFAULT_HANDLE_EVENT,
+      fieldRef
+    } = this.props
+
+    return (
+      <Field
+        name={name}
+        id={id}
+        value={value}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderField()}
+      </div>
+    )
+  }
+}
+
+FieldGremlin.propTypes = {
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  accessKey: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  fieldRef: PropTypes.shape({
+    current: PropTypes.shape({
+      value: PropTypes.string
+    })
+  })
+}
+
+export class GroupGremlin extends Component {
+  getClassName () {
+    return 'gremlin'
+  }
+
+  /**
+   *  @param {GroupGremlinProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.children !== this.props.children)
+    )
+  }
+
+  renderGroup () {
+    const {
+      groupRef,
+      children
+    } = this.props
+
+    return (
+      <Group
+        groupRef={groupRef}>
+        {children}
+      </Group>
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderGroup()}
+      </div>
+    )
+  }
+}
+
+GroupGremlin.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ]),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape({})
+  })
+}

package/src/sass/.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": "stylelint-config-recommended-scss",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "no-descending-specificity": [
+      true,
+      {
+        "severity": "warning"
+      }
+    ]
+  }
+}

package/src/sass/_gremlins.scss

@@ -0,0 +1,59 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@use "gremlins/radio";
+@use "gremlins/checkbox";
+@use "gremlins/disabled";
+@use "gremlins/error";
+
+@mixin gremlins {
+  padding: 0;
+  margin: 1rem 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  line-height: 1.375rem;
+
+  &.radio {
+    @include radio.gremlin-radio;
+  }
+
+  &.checkbox {
+    @include checkbox.gremlin-checkbox;
+  }
+
+  &.disabled {
+    @include disabled.gremlin-disabled;
+  }
+
+  &.error {
+    @include error.gremlin-error;
+  }
+
+  &.fieldset {
+    legend {
+      @include typography.heading-m;
+
+      & /* stylelint-disable-line no-duplicate-selectors */ {
+        padding: 0;
+        margin-top: 0;
+      }
+    }
+
+    &.error {
+      @include error.gremlin-error;
+
+      padding-left: 1rem;
+    }
+  }
+}
+
+%gremlins {
+  @include gremlins;
+}

package/src/sass/gremlins/_checkbox.scss

@@ -0,0 +1,87 @@
+@use "design-system/helpers/breakpoints";
+@use "design-system/palette";
+
+@mixin gremlin-checkbox {
+  position: relative;
+  padding-left: 3rem;
+  margin-bottom: 0.5rem;
+  min-height: 2rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  label {
+    @include breakpoints.breakpoint(mobile) {
+      padding-top: 0.375rem;
+    }
+
+    @include breakpoints.breakpoint(large-mobile) {
+      padding-top: 0.375rem;
+    }
+
+    @include breakpoints.breakpoint(small-mobile) {
+      padding-top: 0.375rem;
+    }
+  }
+
+  label:before {
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    height: 2rem;
+    top: 0;
+    width: 2rem;
+    overflow: hidden;
+    border: 2px solid currentColor;
+    content: "\200b";
+    background-color: palette.$white;
+  }
+
+  input {
+    position: absolute;
+    left: 0.5rem;
+    top: 0.5rem;
+
+    &:focus + label:before {
+      box-shadow: 0 0 0 2px palette.$outline;
+    }
+
+    &:checked + label:after {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0.625rem; // 10px;
+      bottom: 0.625rem; // 10px;
+      left: 0.3125rem; // 5px;
+      width: 1.375rem; // 22px;
+      height: 0.625rem; // 10px;
+      overflow: hidden;
+      border-bottom: 4px solid currentColor;
+      border-left: 4px solid currentColor;
+      content: "\200b";
+      background-color: palette.$white;
+      transform: rotate(-45deg);
+    }
+  }
+
+  &.disabled {
+    input:checked + {
+      label::before {
+        border-color: palette.$disabled;
+      }
+
+      label::after {
+        border-left-color: palette.$disabled;
+        border-bottom-color: palette.$disabled;
+      }
+    }
+
+    input + label::before /* stylelint-disable-line no-descending-specificity */ {
+      border-color: palette.$disabled;
+    }
+  }
+}
+
+%gremlin-checkbox {
+  @include gremlin-checkbox;
+}

package/src/sass/gremlins/_disabled.scss

@@ -0,0 +1,15 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin gremlin-disabled {
+  input:not([type="checkbox"]):not([type="radio"]),
+  select,
+  textarea {
+    border-color: palette.$disabled;
+    color: palette.$disabled;
+  }
+}
+
+%gremlin-disabled {
+  @include gremlin-disabled;
+}

package/src/sass/gremlins/_error.scss

@@ -0,0 +1,48 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin gremlin-error {
+  border-left: 0.25rem solid palette.$error-standard;
+  padding: 0 1rem;
+
+  input:not([type="checkbox"]):not([type="radio"]),
+  select,
+  textarea {
+    border: 2px solid palette.$error-standard;
+
+    &:focus {
+      border-color: palette.$black;
+    }
+  }
+
+  &.radio,
+  &.checkbox {
+    padding-left: 4rem;
+
+    input /* stylelint-disable-line no-descending-specificity */ {
+      left: 1.5rem;
+    }
+
+    label:before /* stylelint-disable-line no-descending-specificity */ {
+      left: 1rem;
+
+      border: 2px solid palette.$error-standard;
+    }
+  }
+
+  &.radio {
+    input:checked + label:after {
+      left: 1.5rem;
+    }
+  }
+
+  &.checkbox {
+    input:checked + label:after {
+      left: 1.3125rem; // 21px;
+    }
+  }
+}
+
+%gremlin-error {
+  @include gremlin-error;
+}

package/src/sass/gremlins/_radio.scss

@@ -0,0 +1,93 @@
+@use "design-system/helpers/breakpoints";
+
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin gremlin-radio {
+  position: relative;
+  padding-left: 3rem;
+  margin-bottom: 0.5rem;
+  min-height: 2rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  label {
+    @include breakpoints.breakpoint(mobile) {
+      padding-top: 0.375rem;
+    }
+
+    @include breakpoints.breakpoint(large-mobile) {
+      padding-top: 0.375rem;
+    }
+
+    @include breakpoints.breakpoint(small-mobile) {
+      padding-top: 0.375rem;
+    }
+  }
+
+  label:before {
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    height: 32px;
+    top: 0;
+    width: 32px;
+    overflow: hidden;
+    border: 2px solid currentColor;
+    border-radius: 50%;
+    content: "\200b";
+    background-color: palette.$white;
+  }
+
+  input {
+    position: absolute;
+    left: 0.5rem;
+    top: 0.5rem;
+
+    &:focus + label:before {
+      box-shadow: 0 0 0 2px palette.$outline;
+    }
+
+    &:checked + label:after {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0.5rem;
+      bottom: 0.5rem;
+      left: 0.5rem;
+      right: 0.5rem;
+      width: 1rem;
+      height: 1rem;
+      overflow: hidden;
+      border: 2px solid currentColor;
+      border-radius: 50%;
+      content: "\200b";
+      background-color: palette.$black;
+    }
+  }
+
+  &.disabled {
+    input + label {
+      &::before,
+      &::after {
+        border-color: palette.$disabled;
+      }
+    }
+
+    input:checked + label {
+      &::before,
+      &::after {
+        border-color: palette.$disabled;
+      }
+
+      &::after /* stylelint-disable-line no-descending-specificity */ {
+        background-color: palette.$disabled;
+      }
+    }
+  }
+}
+
+%gremlin-radio {
+  @include gremlin-radio;
+}

package/src/common/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/common' {
-  export function DEFAULT_HANDLE_CHANGE (): void
-
-  export function DEFAULT_HANDLE_CLICK (): void
-}
-
-declare module '@modernpoacher/gremlins/common' {
-  export * from '#gremlins/common'
-}

package/src/common/index.mjs

@@ -1,7 +0,0 @@
-export function DEFAULT_HANDLE_CHANGE () {
-  /* */
-}
-
-export function DEFAULT_HANDLE_CLICK () {
-  /* */
-}

package/src/components/common/disabled/index.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const DISABLED = String.fromCharCode(42)
-
-export default () => (
-  <span className='is-disabled'>
-    {DISABLED}
-  </span>
-)

package/src/components/common/readonly/index.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const READONLY = String.fromCharCode(42)
-
-export default () => (
-  <span className='is-readonly'>
-    {READONLY}
-  </span>
-)

package/src/components/common/required/index.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const REQUIRED = String.fromCharCode(42)
-
-export default () => (
-  <span className='is-required'>
-    {REQUIRED}
-  </span>
-)

package/src/components/field/index.d.mts

@@ -1,23 +0,0 @@
-declare module '#gremlins/components/field' {
-  import React from 'react'
-
-  export interface FieldProps {
-    id: string
-    name: string
-    required: boolean
-    disabled: boolean
-    readOnly: boolean
-    tabIndex: number
-    accessKey: string
-    placeholder: string
-    onChange: GremlinsTypes.OnChangeType
-    fieldRef: object
-  }
-
-  export default class Field extends React.Component<FieldProps> {}
-}
-
-declare module '@modernpoacher/gremlins/components/field' {
-  export { default } from '#gremlins/components/field'
-  export * from '#gremlins/components/field'
-}

package/src/components/group/index.d.mts

@@ -1,16 +0,0 @@
-declare module '#gremlins/components/group' {
-  import React from 'react'
-
-  export interface GroupProps {
-    onChange: GremlinsTypes.OnChangeType
-    groupRef: object
-    children: React.JSX.Element | React.JSX.Element[]
-  }
-
-  export default class Group extends React.Component<GroupProps> {}
-}
-
-declare module '@modernpoacher/gremlins/components/group' {
-  export { default } from '#gremlins/components/group'
-  export * from '#gremlins/components/group'
-}

package/src/components/group/index.jsx

@@ -1,59 +0,0 @@
-/**
- * Group component
- *
- * @typedef {import('@modernpoacher/gremlins/components/group').GroupProps} GroupProps
- */
-
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import {
-  DEFAULT_HANDLE_CHANGE
-} from '#gremlins/common'
-
-export default class Group extends Component {
-  getClassName () {
-    return 'group'
-  }
-
-  /**
-   * @param {GroupProps} props
-   * @returns {boolean}
-   */
-  shouldComponentUpdate (props, state) {
-    return (
-      (props.onChange !== this.props.onChange) ||
-      (props.children !== this.props.children)
-    )
-  }
-
-  render () {
-    const {
-      onChange = DEFAULT_HANDLE_CHANGE,
-      groupRef,
-      children
-    } = this.props
-
-    return (
-      <fieldset
-        onChange={onChange}
-        className={this.getClassName()}
-        ref={groupRef}>
-        {children}
-      </fieldset>
-    )
-  }
-}
-
-Group.propTypes = {
-  onChange: PropTypes.func,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(
-      PropTypes.node
-    )
-  ]),
-  groupRef: PropTypes.shape({
-    current: PropTypes.shape().isRequired
-  })
-}

package/src/gremlins/checkbox/field/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/checkbox/field' {
-  import Field from '#gremlins/components/field'
-
-  export default class CheckboxField extends Field {}
-}
-
-declare module '@modernpoacher/gremlins/checkbox/field' {
-  export { default } from '#gremlins/gremlins/checkbox/field'
-}

package/src/gremlins/checkbox/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/checkbox' {
-  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
-
-  export default class CheckboxGremlin extends Gremlin {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins/checkbox' {
-  export { default } from '#gremlins/gremlins/checkbox'
-}

package/src/gremlins/email/field/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/email/field' {
-  import Field from '#gremlins/components/field'
-
-  export default class EmailField extends Field {}
-}
-
-declare module '@modernpoacher/gremlins/email/field' {
-  export { default } from '#gremlins/gremlins/email/field'
-}