@modernpoacher/gremlins 0.0.311 → 1.0.0

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'
-}

package/src/gremlins/email/field/index.jsx

@@ -1,54 +0,0 @@
-/**
- * EmailField component
- */
-import React from 'react'
-import classnames from 'classnames'
-
-import { ValueField } from '#gremlins/components/field'
-
-export default class EmailField extends ValueField {
-  getClassName () {
-    return classnames(super.getClassName(), 'email')
-  }
-
-  render () {
-    const {
-      id,
-      name,
-      value,
-      defaultValue,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      placeholder,
-      fieldRef
-    } = this.props
-
-    const className = this.getClassName()
-
-    return (
-      <input
-        id={id}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        placeholder={placeholder}
-        onChange={this.handleChange}
-        className={className}
-        type='email'
-        ref={fieldRef}
-      />
-    )
-  }
-}
-
-EmailField.propTypes = {
-  ...ValueField.propTypes
-}

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

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

package/src/gremlins/fieldset/group/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/fieldset/group' {
-  import Group from '#gremlins/components/group'
-
-  export default class FieldsetGroup extends Group {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins/fieldset/group' {
-  export { default } from '#gremlins/gremlins/fieldset/group'
-}

package/src/gremlins/fieldset/group/index.jsx

@@ -1,16 +0,0 @@
-/**
- * FieldsetGroup component
- */
-
-import classnames from 'classnames'
-import Group from '#gremlins/components/group'
-
-export default class FieldsetGroup extends Group {
-  getClassName () {
-    return classnames(super.getClassName(), 'fieldset')
-  }
-}
-
-FieldsetGroup.propTypes = {
-  ...Group.propTypes
-}

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

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

package/src/gremlins/fieldset/index.jsx

@@ -1,41 +0,0 @@
-/**
- * FieldsetGremlin component
- *
- * @typedef {import('@modernpoacher/gremlins/gremlins').GroupGremlinProps} GroupGremlinProps
- */
-
-import React from 'react'
-
-import classnames from 'classnames'
-
-import { GroupGremlin as Gremlin } from '#gremlins/gremlins'
-
-import {
-  DEFAULT_HANDLE_CHANGE
-} from '#gremlins/common'
-
-import Group from './group/index.jsx'
-
-export default class FieldsetGremlin extends Gremlin {
-  getClassName () {
-    return classnames(super.getClassName(), 'fieldset')
-  }
-
-  renderGroup () {
-    const {
-      onChange = DEFAULT_HANDLE_CHANGE,
-      children
-    } = this.props
-
-    return (
-      <Group
-        onChange={onChange}>
-        {children}
-      </Group>
-    )
-  }
-}
-
-FieldsetGremlin.propTypes = {
-  ...Gremlin.propTypes
-}

package/src/gremlins/index.d.mts

@@ -1,45 +0,0 @@
-declare module '#gremlins/gremlins' {
-  import React from 'react'
-
-  export interface FieldGremlinProps {
-    id: string
-    name: string
-    required: boolean
-    disabled: boolean
-    readOnly: boolean
-    placeholder: string
-    onChange: GremlinsTypes.OnChangeType
-    fieldRef: object
-  }
-
-  export interface ValueGremlinProps extends FieldGremlinProps {
-    value: string
-    defaultValue: string
-    onChange: GremlinsTypes.OnChangeType
-  }
-
-  export interface CheckGremlinProps extends FieldGremlinProps {
-    checked: boolean
-    defaultChecked: boolean
-    onClick: GremlinsTypes.OnClickType
-  }
-
-  export interface GroupGremlinProps {
-    title: string
-    onChange: GremlinsTypes.OnChangeType
-    groupRef: object
-    children: React.JSX.Element | React.JSX.Element[]
-  }
-
-  export class FieldGremlin extends React.Component<FieldGremlinProps> {}
-
-  export class ValueGremlin extends React.Component<ValueGremlinProps> {}
-
-  export class CheckGremlin extends React.Component<CheckGremlinProps> {}
-
-  export class GroupGremlin extends React.Component<GroupGremlinProps> {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins' {
-  export * from '#gremlins/gremlins'
-}