blackbaud-services / constructicon

A collection of reusable react components for Professional Services

Constructicon

Important Links

• Pipeline
• NPM Package

A collection of common patterns used across many Professional Services projects.

The aim of this library is to provide a toolbelt of components, that will allow us to compose sites together more quickly and consistently.

Theming and Flexibility

One of the main challenges is providing the required flexibility.

The TraitsProvider component allows us to set our own themes and defaults.

We can manage the look of most components via various props, and even have custom styles injected into them via the styles prop.

Upgrading from 0.* to v1.0

A few breaking changes were introduced in 1.0.0 that need to be considered on the following components:

• Container

  Changes from styles object (e.g. styles = { ... }) to use nested keys, e.g.

  {
    root: { ... },
    outer: { ... }
  }
  

• Modal

  Removed nested styles object weirdness. So instead of:

  {
    wrapper: {
      content: { ... },
      overlay: { ... }
    },
    container: { ... },
    close: { ... }
  }
  

  It is now:

  {
    content: { ... },
    overlay: { ... },
    container: { ... },
    close: { ... }
  }
  

• Form

  Change styles.form to styles.root for consistency.

• ProgressBar

  Change styles.background to styles.root for consistency.

Upgrading to v2

Constructicon now uses Emotion as it's CSS in JS solution. There are a few small things you will need to do to ensure your CSS is compatible.

• Any child CSS selectors are required to be prefixed with an & e.g. '& > div', &:hover
• Define your keyframes in their own object and pass them into withStyles, which will then pass your computed keyframes back to your styles function e.g. see components/icon/styles.js
• If you are using your own renderDocument function, renderServerCSS is now a function that takes your server rendered string of HTML, and returns an updated HTML string with the required styles inlined in the markup

Development

Scripts

• yarn to install dependencies
• yarn start to generate and serve style guide
• yarn test to run tests (linting and unit tests)
• yarn run test:lint to run linting
• yarn run test:unit to run unit tests
• yarn run build to build for production
• yarn run build:styleguide to build the styleguide
• yarn run build:icons to minify and prepare the icons to import into icons.js. See more below.
• yarn playground:build to build webpack for the local development server
• yarn playground:start to start the local development server

Tests

We are aiming to build from the ground up with tests where appropriate, using Mocha, Chai and Enzyme.

To execute the tests, simply run yarn test.

Icons

The icon set is maintained in a Sketch file, which is setup to export individual SVG files for each icon to the icons directory.

After exporting from Sketch, run yarn run build:icons to minify SVGs and concatenate into a single file to grab the path data to import into icons.js.

constructicon's Issues

Better handle empty children prop

For some of our components, e.g. Heading & Richtext, we require a children prop.

Whilst it makes sense on its own, this causes issues in implementation where we render a component whilst its data it still being loaded, and get an error.

Either we need a better pattern for not rendering components (implementation) or not explicitly require a children prop for these components and provide a fallback while content is loading / not available.

axios-1.6.7.tgz: 2 vulnerabilities (highest severity is: 7.5) - autoclosed

Vulnerable Library - axios-1.6.7.tgz

Library home page: https://registry.npmjs.org/axios/-/axios-1.6.7.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/axios/package.json

Found in HEAD commit: 48ed08c1be86032e54de84dca0f1021686d42771

Vulnerabilities

CVE	Severity	CVSS	Dependency	Type	Fixed in (axios version)	Remediation Possible**
CVE-2024-39338	High	7.5	axios-1.6.7.tgz	Direct	N/A	❌
CVE-2024-28849	Medium	6.5	follow-redirects-1.15.5.tgz	Transitive	N/A*	❌

*For some transitive vulnerabilities, there is no version of direct dependency with a fix. Check the "Details" section below to see if there is a version of transitive dependency where vulnerability is fixed.

**In some cases, Remediation PR cannot be created automatically for a vulnerability despite the availability of remediation

Details

CVE-2024-39338

Vulnerable Library - axios-1.6.7.tgz

Library home page: https://registry.npmjs.org/axios/-/axios-1.6.7.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/axios/package.json

Dependency Hierarchy:

• ❌ axios-1.6.7.tgz (Vulnerable Library)

Found in HEAD commit: 48ed08c1be86032e54de84dca0f1021686d42771

Found in base branch: master

Vulnerability Details

axios 1.7.2 allows SSRF via unexpected behavior where requests for path relative URLs get processed as protocol relative URLs.

Publish Date: 2024-08-09

URL: CVE-2024-39338

CVSS 3 Score Details (7.5)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: None
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: High
  • Integrity Impact: None
  • Availability Impact: None

For more information on CVSS3 Scores, click here.

CVE-2024-28849

Vulnerable Library - follow-redirects-1.15.5.tgz

Library home page: https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/follow-redirects/package.json

Dependency Hierarchy:

• axios-1.6.7.tgz (Root Library)
  • ❌ follow-redirects-1.15.5.tgz (Vulnerable Library)

Found in HEAD commit: 48ed08c1be86032e54de84dca0f1021686d42771

Found in base branch: master

Vulnerability Details

follow-redirects is an open source, drop-in replacement for Node's http and https modules that automatically follows redirects. In affected versions follow-redirects only clears authorization header during cross-domain redirect, but keep the proxy-authentication header which contains credentials too. This vulnerability may lead to credentials leak, but has been addressed in version 1.15.6. Users are advised to upgrade. There are no known workarounds for this vulnerability.

Publish Date: 2024-03-14

URL: CVE-2024-28849

CVSS 3 Score Details (6.5)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: Low
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: High
  • Integrity Impact: None
  • Availability Impact: None

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: GHSA-cxjh-pqwp-8mfp

Release Date: 2024-03-14

Fix Resolution: follow-redirects - 1.15.6

react-avatar-editor-13.0.2.tgz: 2 vulnerabilities (highest severity is: 7.5)

Vulnerable Library - react-avatar-editor-13.0.2.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/@babel/helper-define-polyfill-provider/node_modules/semver/package.json,/node_modules/@babel/plugin-transform-runtime/node_modules/semver/package.json

Found in HEAD commit: 48ed08c1be86032e54de84dca0f1021686d42771

Vulnerabilities

CVE	Severity	CVSS	Dependency	Type	Fixed in (react-avatar-editor version)	Remediation Possible**
CVE-2022-25883	High	7.5	detected in multiple dependencies	Transitive	N/A*	❌
CVE-2017-16137	Low	3.7	debug-4.1.1.tgz	Transitive	N/A*	❌

*For some transitive vulnerabilities, there is no version of direct dependency with a fix. Check the "Details" section below to see if there is a version of transitive dependency where vulnerability is fixed.

**In some cases, Remediation PR cannot be created automatically for a vulnerability despite the availability of remediation

Details

CVE-2022-25883

Vulnerable Libraries - semver-7.0.0.tgz, semver-6.3.0.tgz

semver-7.0.0.tgz

The semantic version parser used by npm.

Library home page: https://registry.npmjs.org/semver/-/semver-7.0.0.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/@babel/plugin-transform-runtime/node_modules/core-js-compat/node_modules/semver/package.json

Dependency Hierarchy:

• react-avatar-editor-13.0.2.tgz (Root Library)
  • plugin-transform-runtime-7.15.0.tgz
    • babel-plugin-polyfill-corejs3-0.2.4.tgz
      • core-js-compat-3.17.3.tgz
        • ❌ semver-7.0.0.tgz (Vulnerable Library)

semver-6.3.0.tgz

The semantic version parser used by npm.

Library home page: https://registry.npmjs.org/semver/-/semver-6.3.0.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/@babel/helper-define-polyfill-provider/node_modules/semver/package.json,/node_modules/@babel/plugin-transform-runtime/node_modules/semver/package.json

Dependency Hierarchy:

• react-avatar-editor-13.0.2.tgz (Root Library)
  • plugin-transform-runtime-7.15.0.tgz
    • ❌ semver-6.3.0.tgz (Vulnerable Library)

Found in HEAD commit: 48ed08c1be86032e54de84dca0f1021686d42771

Found in base branch: master

Vulnerability Details

Versions of the package semver before 7.5.2 are vulnerable to Regular Expression Denial of Service (ReDoS) via the function new Range, when untrusted user data is provided as a range.

Publish Date: 2023-06-21

URL: CVE-2022-25883

CVSS 3 Score Details (7.5)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: None
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: None
  • Integrity Impact: None
  • Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: GHSA-c2qf-rxjj-qqgw

Release Date: 2024-08-08

Fix Resolution: semver - 5.7.2,6.3.1,7.5.2;org.webjars.npm:semver:7.5.2

CVE-2017-16137

Vulnerable Library - debug-4.1.1.tgz

small debugging utility

Library home page: https://registry.npmjs.org/debug/-/debug-4.1.1.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/@babel/helper-define-polyfill-provider/node_modules/debug/package.json

Dependency Hierarchy:

• react-avatar-editor-13.0.2.tgz (Root Library)
  • plugin-transform-runtime-7.15.0.tgz
    • babel-plugin-polyfill-corejs3-0.2.4.tgz
      • helper-define-polyfill-provider-0.2.3.tgz
        • ❌ debug-4.1.1.tgz (Vulnerable Library)

Found in HEAD commit: 48ed08c1be86032e54de84dca0f1021686d42771

Found in base branch: master

Vulnerability Details

The debug module is vulnerable to regular expression denial of service when untrusted user input is passed into the o formatter. It takes around 50k characters to block for 2 seconds making this a low severity issue.

Publish Date: 2018-06-07

URL: CVE-2017-16137

CVSS 3 Score Details (3.7)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: High
  • Privileges Required: None
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: None
  • Integrity Impact: None
  • Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: GHSA-gxpj-cx7g-858c

Release Date: 2018-04-26

Fix Resolution: debug - 2.6.9,3.1.0,3.2.7,4.3.1

Link Component

There has been a bit of conjecture around how we create links in our static sites, and avoid fetching from prismic at runtime.

Would it be worth defining our own Link component, that abstracts this decision and handles adding target=_self, or whatever our chosen method is.

We could also make it handle on page # links as well, all in one place.

I have found myself writing similar components to handle this in a few projects

Make margin/padding more consistent

And add wherever it makes sense...

Consistency of HOC vs UI Components?

This represents a breaking change, but:

withStyles is imported from lib/css whereas withForm and withToggle are from components.

Not sure which is the best way to go exactly, but consistency would be ideal. I'd personally lean towards all HOCs living in lib or similar, to differentiate from UI components

Thoughts?

InputDate component

Similar to the InputField component. To show three elements on desktop, and default to <input type='date'> on mobile. Possibly optional date-picker support?

DRY up InputField & InputSelect component labels

E.g. https://github.com/everydayhero/challenge4change/blob/master/source/components/FormLabel/index.js

Errors when spreading generic props onto DOM components

e.g. <Button /> component spreads properties such as background on to a <button> tag by default.

We should perhaps only pass on a whitelist of props, such as onClick etc

Potentially rename component directories to kebab-case to avoid Gulp hackery

See above

Meta component needs to be updated to handle Prismic Utils updates

Updates to the structure of Image and Link fields returned from Prismic Utils require changes to be made to certain keys in the Meta component.

For example:

{ 'property': 'og:image', 'content': props.ogImage }

Would now need to be the below, or similar:

{ 'property': 'og:image', 'content': props.ogImage.url || props.ogImage }

Add a `no-only` build step

This is to prevent a describe.only used in development slipping through the cracks.

For example:
https://github.com/everydayhero/postoffice/blob/master/.buildkite/pipeline.yml#L11
https://github.com/everydayhero/postoffice/blob/master/bin/no-only

Dropdown / Typeahead Component

Styled <select> component with keyboard interaction for dropdown options.

Examples of existing components:

• 40HF
• SUQLD
• SFR

InputField component type prop whitelist

With the InputField component, the type prop should really be a whitelist.

e.g. type: PropTypes.oneOf([ 'text, 'email', 'password', ... ])

Change slack announcement version in buildkite pipeline

Use version from package.json instead of commit message.

Ensure overflow: hidden removed if modal unmounted

The modal component adds and removes overflow: hidden on the body based on the isOpen prop. But if the modal is unmounted, without that prop changing, it effectively means the modal closes, but you can't scroll the document.

Need to ensure that the rule(s) are removed on componentWillUnmount as well as the current check based on the isOpen prop.

Remove strict colour name validation from colour props

Currently we validate any colour prop against a specific list of options, which causes issues when we add custom colour names to our projects.

For example, in the Button component: background: PropTypes.oneOf(options.colors),

Meta Component

This is another component that is most services projects. It basically takes our standard metadata structure in Prismic and passes it into react-helmet.

Maybe living here would be a better place?

Example - https://github.com/everydayhero/hike-the-light/blob/master/source/components/Meta/index.js

Make it possible to set the aria-label

We should not default the label to 'button', there is also no way to over ride the label at the moment

https://github.com/everydayhero/constructicon/blob/2745884dd4779ab85476dffa34fb2df33ef1caaf/source/components/button/index.js#L29