@modernpoacher/cogs 0.1.256 → 1.0.0

package/src/sass/cogs/_checkbox.scss

@@ -0,0 +1,87 @@
+@use "design-system/helpers/breakpoints";
+@use "design-system/palette";
+
+@mixin cog-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;
+    }
+  }
+}
+
+%cog-checkbox {
+  @include cog-checkbox;
+}

package/src/sass/cogs/_disabled.scss

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

package/src/sass/cogs/_error.scss

@@ -0,0 +1,48 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin cog-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;
+    }
+  }
+}
+
+%cog-error {
+  @include cog-error;
+}

package/src/sass/cogs/_radio.scss

@@ -0,0 +1,93 @@
+@use "design-system/helpers/breakpoints";
+
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin cog-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;
+      }
+    }
+  }
+}
+
+%cog-radio {
+  @include cog-radio;
+}

package/jsconfig.json

@@ -1,5 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "."
-  }
-}

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

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

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

@@ -1,9 +0,0 @@
-declare module '#cogs/cogs/checkbox' {
-  import Cog from '#cogs/cogs'
-
-  export default class CheckboxCog extends Cog {}
-}
-
-declare module '@modernpoacher/cogs/cogs/checkbox' {
-  export { default } from '#cogs/cogs/checkbox'
-}

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

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

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

@@ -1,54 +0,0 @@
-/**
- * EmailField component
- */
-import React from 'react'
-import classnames from 'classnames'
-
-import { ValueField } from '#cogs/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/cogs/email/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#cogs/cogs/email' {
-  import Cog from '#cogs/cogs'
-
-  export default class EmailCog extends Cog {}
-}
-
-declare module '@modernpoacher/cogs/cogs/email' {
-  export { default } from '#cogs/cogs/email'
-}

package/src/cogs/email/title/index.jsx

@@ -1,15 +0,0 @@
-/**
- * EmailTitle component
- */
-import classnames from 'classnames'
-import Title from '#cogs/components/title'
-
-export default class EmailTitle extends Title {
-  getClassName () {
-    return classnames(super.getClassName(), 'email')
-  }
-}
-
-EmailTitle.propTypes = {
-  ...Title.propTypes
-}

package/src/cogs/index.d.mts

@@ -1,24 +0,0 @@
-declare module '#cogs/cogs' {
-  import React from 'react'
-
-  export interface CogProps {
-    id: string
-    name: string
-    title: string
-    description: string
-    errorMessage: CogsTypes.ErrorDefinitionType
-    required: boolean
-    disabled: boolean
-    readOnly: boolean
-    placeholder: string
-    onChange: CogsTypes.onEventType
-    fieldRef: object
-  }
-
-  export default class Cog extends React.Component<CogProps> {}
-}
-
-declare module '@modernpoacher/cogs/cogs' {
-  export { default } from '#cogs/cogs'
-  export * from '#cogs/cogs'
-}

package/src/cogs/number/field/index.d.mts

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

package/src/cogs/number/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#cogs/cogs/number' {
-  import Cog from '#cogs/cogs'
-
-  export default class NumberCog extends Cog {}
-}
-
-declare module '@modernpoacher/cogs/cogs/number' {
-  export { default } from '#cogs/cogs/number'
-}

package/src/cogs/password/field/index.d.mts

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

package/src/cogs/password/field/index.jsx

@@ -1,54 +0,0 @@
-/**
- * PasswordField component
- */
-import React from 'react'
-import classnames from 'classnames'
-
-import { ValueField } from '#cogs/components/field'
-
-export default class PasswordField extends ValueField {
-  getClassName () {
-    return classnames(super.getClassName(), 'password')
-  }
-
-  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='password'
-        ref={fieldRef}
-      />
-    )
-  }
-}
-
-PasswordField.propTypes = {
-  ...ValueField.propTypes
-}

package/src/cogs/password/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#cogs/cogs/password' {
-  import Cog from '#cogs/cogs'
-
-  export default class PasswordCog extends Cog {}
-}
-
-declare module '@modernpoacher/cogs/cogs/password' {
-  export { default } from '#cogs/cogs/password'
-}

package/src/cogs/radio/field/index.d.mts

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

package/src/cogs/radio/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#cogs/cogs/radio' {
-  import Cog from '#cogs/cogs'
-
-  export default class RadioCog extends Cog {}
-}
-
-declare module '@modernpoacher/cogs/cogs/radio' {
-  export { default } from '#cogs/cogs/radio'
-}

package/src/cogs/select/field/index.d.mts

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

package/src/cogs/select/field/index.jsx

@@ -1,111 +0,0 @@
-/**
- * SelectField component
- */
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-import { ValueField } from '#cogs/components/field'
-
-import {
-  DEFAULT_HANDLE_CHANGE
-} from '#cogs/common'
-
-function getSelectedValues ({ target: { selectedOptions } }) {
-  return (
-    Array.from(selectedOptions)
-      .map(({ value, text }) => value || text)
-  )
-}
-
-function getSelectedValue ({ target: { value } }) {
-  return value
-}
-
-export default class SelectField extends ValueField {
-  shouldComponentUpdate (props, state) {
-    return (
-      super.shouldComponentUpdate(props) ||
-      (props.multiple !== this.props.multiple) ||
-      (props.children !== this.props.children)
-    )
-  }
-
-  getClassName () {
-    return classnames(super.getClassName(), 'select')
-  }
-
-  handleChange = (event) => {
-    const {
-      multiple = false,
-      onChange = DEFAULT_HANDLE_CHANGE
-    } = this.props
-
-    if (multiple) {
-      onChange(getSelectedValues(event))
-    } else {
-      onChange(getSelectedValue(event))
-    }
-  }
-
-  render () {
-    const {
-      id,
-      name,
-      value,
-      defaultValue,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      multiple = false,
-      children,
-      fieldRef
-    } = this.props
-
-    const className = this.getClassName()
-
-    return (
-      <select
-        id={id}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        multiple={multiple}
-        onChange={this.handleChange}
-        className={className}
-        ref={fieldRef}>
-        {children}
-      </select>
-    )
-  }
-}
-
-SelectField.propTypes = {
-  ...ValueField.propTypes,
-  multiple: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(
-      PropTypes.string
-    )
-  ]),
-  defaultValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(
-      PropTypes.string
-    )
-  ]),
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(
-      PropTypes.node
-    )
-  ])
-}

package/src/cogs/select/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#cogs/cogs/select' {
-  import Cog from '#cogs/cogs'
-
-  export default class SelectCog extends Cog {}
-}
-
-declare module '@modernpoacher/cogs/cogs/select' {
-  export { default } from '#cogs/cogs/select'
-}

package/src/cogs/select/title/index.jsx

@@ -1,15 +0,0 @@
-/**
- * SelectTitle component
- */
-import classnames from 'classnames'
-import Title from '#cogs/components/title'
-
-export default class SelectTitle extends Title {
-  getClassName () {
-    return classnames(super.getClassName(), 'select')
-  }
-}
-
-SelectTitle.propTypes = {
-  ...Title.propTypes
-}

package/src/cogs/text/field/index.d.mts

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