@modernpoacher/sprockets 0.0.288 → 1.0.0

package/src/js/super/components/index.d.cts

@@ -0,0 +1,4 @@
+export { default as Description } from '#sprockets/super/components/description'
+export { default as ErrorMessage } from '#sprockets/super/components/error-message'
+export { default as Group } from '#sprockets/super/components/group'
+export { default as Title } from '#sprockets/super/components/title'

package/src/js/super/components/index.d.mts

@@ -0,0 +1,4 @@
+export { default as Description } from '#sprockets/super/components/description'
+export { default as ErrorMessage } from '#sprockets/super/components/error-message'
+export { default as Group } from '#sprockets/super/components/group'
+export { default as Title } from '#sprockets/super/components/title'

package/src/js/super/components/index.mjs

@@ -0,0 +1,10 @@
+import debug from 'debug'
+
+const log = debug('@modernpoacher/sprockets/super/components')
+
+log('`sprockets` is awake')
+
+export { default as Description } from './description/index.cjs'
+export { default as ErrorMessage } from './error-message/index.cjs'
+export { default as Group } from './group/index.cjs'
+export { default as Title } from './title/index.cjs'

package/src/js/super/components/title/index.cjs

@@ -0,0 +1,20 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/super/components/title')
+
+log('`sprockets` is awake')
+
+const {
+  default: Title
+} = require('./index.jsx')
+
+/**
+ *  Exports only default
+ */
+module.exports = Title

package/src/js/super/components/title/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#sprockets/super/components/title'
+export * from '#sprockets/super/components/title'

package/src/js/super/components/title/index.d.mts

@@ -0,0 +1,20 @@
+declare module '#sprockets/super/components/title' {
+  import React from 'react'
+
+  export type TitleProps = SprocketsTypes.Super.Components.Title.TitleProps
+
+  export default class Title<P extends TitleProps> extends React.Component<P> {
+    static propTypes: object
+
+    getClassName (): string
+
+    shouldComponentUpdate (props: TitleProps): boolean
+
+    renderTextContent (textContent: string): React.JSX.Element
+  }
+}
+
+declare module '@modernpoacher/sprockets/super/components/title' {
+  export { default } from '#sprockets/super/components/title'
+  export * from '#sprockets/super/components/title'
+}

package/src/js/super/components/title/index.jsx

@@ -0,0 +1,62 @@
+/**
+ *  @typedef {SprocketsTypes.Super.Components.Title.TitleProps} TitleProps
+ */
+
+/**
+ *  Title component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import TextContent from '#sprockets/components/common/text-content'
+
+/**
+ *  @extends {Component<TitleProps>}
+ */
+export default class Title extends Component {
+  getClassName () {
+    return 'title'
+  }
+
+  /**
+   *  @param {TitleProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.title !== this.props.title)
+    )
+  }
+
+  /**
+   *  @param {string} textContent
+   *  @returns {React.JSX.Element}
+   */
+  renderTextContent (textContent) {
+    return (
+      <TextContent
+        textContent={textContent}
+      />
+    )
+  }
+
+  render () {
+    const {
+      title
+    } = this.props
+
+    if (title) {
+      return (
+        <legend className={this.getClassName()}>
+          {this.renderTextContent(title)}
+        </legend>
+      )
+    }
+
+    return null
+  }
+}
+
+Title.propTypes = {
+  title: PropTypes.string
+}

package/src/{components/common/text-content → js/super/sprockets}/index.cjs

@@ -6,12 +6,15 @@ require('@babel/register')({
 
 const debug = require('debug')
 
-const log = debug('@modernpoacher/sprockets/sprockets/common/text-content')
+const log = debug('@modernpoacher/sprockets/super/sprockets')
 
 log('`sprockets` is awake')
 
 const {
-  default: component
+  default: Sprocket
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Sprocket

package/src/js/super/sprockets/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#sprockets/super/sprockets'
+export * from '#sprockets/super/sprockets'

package/src/js/super/sprockets/index.d.mts

@@ -0,0 +1,22 @@
+declare module '#sprockets/super/sprockets' {
+  import React from 'react'
+
+  export type SprocketProps = SprocketsTypes.Super.Sprockets.SprocketProps
+
+  export default class Sprocket<P extends SprocketProps> extends React.Component<P> {
+    static propTypes: object
+
+    getClassName (): string
+
+    shouldComponentUpdate (props: SprocketProps): boolean
+
+    renderTitle (): React.JSX.Element | null
+
+    renderGroup (): React.JSX.Element | null
+  }
+}
+
+declare module '@modernpoacher/sprockets/super/sprockets' {
+  export { default } from '#sprockets/super/sprockets'
+  export * from '#sprockets/super/sprockets'
+}

package/src/{sprockets → js/super/sprockets}/index.jsx

@@ -1,18 +1,15 @@
 /**
- * Sprocket component
- *
- * @typedef {import('@modernpoacher/sprockets/sprockets').SprocketProps} SprocketProps
+ *  @typedef {SprocketsTypes.Super.Sprockets.SprocketProps} SprocketProps
  */
 
+/**
+ *  Sprocket component
+ */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import {
-  DEFAULT_HANDLE_CHANGE
-} from '#sprockets/common'
-
-import Title from '#sprockets/components/title'
-import Group from '#sprockets/components/group'
+import Title from '#sprockets/super/components/title'
+import Group from '#sprockets/super/components/group'
 
 export default class Sprocket extends Component {
   getClassName () {
@@ -20,14 +17,13 @@ export default class Sprocket extends Component {
   }
 
   /**
-   * @param {SprocketProps} props
-   * @returns {boolean}
+   *  @param {SprocketProps} props
+   *  @returns {boolean}
    */
-  shouldComponentUpdate (props, state) {
+  shouldComponentUpdate (props) {
     return (
       (props.children !== this.props.children) ||
-      (props.title !== this.props.title) ||
-      (props.onChange !== this.props.onChange)
+      (props.title !== this.props.title)
     )
   }
 
@@ -45,14 +41,12 @@ export default class Sprocket extends Component {
 
   renderGroup () {
     const {
-      onChange = DEFAULT_HANDLE_CHANGE,
       groupRef,
       children
     } = this.props
 
     return (
       <Group
-        onChange={onChange}
         groupRef={groupRef}>
         {this.renderTitle()}
         {children}
@@ -73,7 +67,6 @@ export default class Sprocket extends Component {
 
 Sprocket.propTypes = {
   title: PropTypes.string,
-  onChange: PropTypes.func,
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(
@@ -81,6 +74,6 @@ Sprocket.propTypes = {
     )
   ]),
   groupRef: PropTypes.shape({
-    current: PropTypes.shape().isRequired
+    current: PropTypes.shape({})
   })
 }

package/src/js/transformers/common/index.d.mts

@@ -0,0 +1 @@
+export function getKey (href: string, text: string, index: number): string

package/src/{transformers → js/transformers}/common/index.mjs

@@ -5,13 +5,13 @@ const CHAR45 = String.fromCharCode(45)
 
 const log = debug('@modernpoacher/sprockets/transformers/common')
 
-log('`shinkansen` is awake')
+log('`sprockets` is awake')
 
 /**
- * @param {string} href
- * @param {string} text
- * @param {number} index
- * @returns {string}
+ *  @param {string} href
+ *  @param {string} text
+ *  @param {number} index
+ *  @returns {string}
  */
 export function getKey (href, text, index) {
   return (

package/src/js/transformers/index.d.mts

@@ -0,0 +1 @@
+export * as common from '#sprockets/transformers/common'

package/src/js/transformers/index.mjs

@@ -0,0 +1 @@
+export * as common from './common/index.mjs'

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/_sprockets.scss

@@ -0,0 +1,77 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@use "sprockets/error-summary";
+@use "sprockets/check-answers";
+@use "sprockets/error";
+
+@mixin sprockets {
+  padding: 0;
+  margin: 1rem 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  line-height: 1.375rem;
+
+  &.error-summary {
+    @include error-summary.sprocket-error-summary;
+  }
+
+  &.check-answers {
+    @include check-answers.sprocket-check-answers;
+  }
+
+  &.fieldset {
+    legend {
+      @include typography.heading-m;
+
+      & /* stylelint-disable-line no-duplicate-selectors */ {
+        padding: 0;
+        margin-top: 0;
+      }
+    }
+
+    &.error {
+      @include error.sprocket-error;
+
+      padding-left: 1rem;
+    }
+
+    .description {
+      @include typography.secondary-text;
+
+      & /* stylelint-disable-line no-duplicate-selectors */ {
+        display: block;
+        padding: 0;
+        margin: 0 0 0.25rem 0;
+      }
+    }
+
+    .error-message {
+      @include typography.error-standard;
+
+      & /* stylelint-disable-line no-duplicate-selectors */ {
+        display: block;
+        padding: 0;
+        margin: 0 0 0.25rem 0;
+      }
+    }
+  }
+
+  /**
+   *  Descendants
+   */
+  .sprocket {
+    margin-bottom: 0;
+  }
+}
+
+%sprockets {
+  @include sprockets;
+}

package/src/sass/sprockets/_check-answers.scss

@@ -0,0 +1,54 @@
+@use "design-system/helpers/invisible";
+
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin sprocket-check-answers {
+  & > h2:first-child {
+    margin-top: 0;
+  }
+
+  dl {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+
+    .answer {
+      display: table-row;
+    }
+
+    dt,
+    dd {
+      display: table-cell;
+      padding: 0.25rem 0;
+      border-bottom: 2px solid palette.$grey-1;
+    }
+
+    .answer-title {
+      @include typography.heading-s;
+
+      & /* stylelint-disable-line no-duplicate-selectors */ {
+        width: 30%;
+        padding-right: 1rem;
+      }
+    }
+
+    .answer-value {
+      width: 50%;
+    }
+
+    .change-answer {
+      width: 20%;
+      padding-left: 1rem;
+      text-align: right;
+
+      .visually-hidden-text {
+        @include invisible.invisible;
+      }
+    }
+  }
+}
+
+%sprocket-check-answers {
+  @include sprocket-check-answers;
+}

package/src/sass/sprockets/_error-summary.scss

@@ -0,0 +1,57 @@
+@use "design-system/helpers/invisible";
+
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin sprocket-error-summary {
+  background-color: palette.$white;
+  border: 0.25rem solid palette.$error-standard;
+  display: block;
+  padding: 1rem;
+  line-height: 2rem;
+
+  & > h2:first-child {
+    margin-top: 0;
+  }
+
+  ul {
+    margin-bottom: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  li {
+    @include typography.error-standard;
+
+    & /* stylelint-disable-line no-duplicate-selectors */ {
+      display: block;
+      padding: 0;
+      margin: 0 0 0.25rem 0;
+    }
+  }
+
+  a {
+    @include typography.error-standard;
+
+    &:focus {
+      outline: 3px solid transparent;
+      text-decoration: none;
+      outline-offset: 0;
+      box-shadow:
+        0 -2px palette.$outline,
+        0 4px palette.$black;
+      color: palette.$standard;
+      background-color: palette.$outline;
+    }
+  }
+
+  &:focus {
+    outline: 3px solid palette.$outline;
+    outline-offset: 0;
+    border-color: palette.$black;
+  }
+}
+
+%sprocket-error-summary {
+  @include sprocket-error-summary;
+}

package/src/sass/sprockets/_error.scss

@@ -0,0 +1,47 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin sprocket-error {
+  border-left: 0.25rem solid palette.$error-standard;
+
+  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;
+    }
+  }
+}
+
+%sprocket-error {
+  @include sprocket-error;
+}

package/jsconfig.json

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

package/src/common/index.d.mts

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

package/src/common/index.mjs

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

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

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

package/src/components/group/index.jsx

@@ -1,59 +0,0 @@
-/**
- * Group component
- *
- * @typedef {import('@modernpoacher/sprockets/components/group').GroupProps} GroupProps
- */
-
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import {
-  DEFAULT_HANDLE_CHANGE
-} from '#sprockets/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
-  })
-}