Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Card] React: Add optional Tag Group

See original GitHub issue

Detailed description

Describe in detail the issue you’re having.

I have the working code to add TagGroup to Card, however we need to solve an odd bug when running the jest tests and make sure this doesn’t affect the compilation of the React package outside of Card.

Is this a feature request (new component, new icon), a bug, or a general issue? More of a bug, since the working code is ready to be implemented.

Is this issue related to a specific component? Card.

Steps to reproduce the issue

Add working code
Run yarn test:unit:updateSnapshot in the React package directory

Additional information

Jest error:

Details:

    /Users/ignacio.becerra/Documents/GitHub/ibm-dotcom-library/packages/web-components/node_modules/@babel/runtime/helpers/esm/decorate.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import toArray from "@babel/runtime/helpers/esm/toArray";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      20 | const {
      21 |   stablePrefix: ddsPrefix
    > 22 | } = ddsSettings;
         |                                     ^
      23 | const {
      24 |   prefix
      25 | } = settings;

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1258:14)
      at Object.<anonymous> (../web-components/es/components/tag-group/tag-group.js:22:41)

Issue Analytics

State:
Created 2 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

IgnacioBecerracommented, Aug 25, 2021

@shixiedesign It’s still an issue since this is for the React storybook. The code I have works and everything, but we can’t update snapshots and thus can’t merge just yet since the checks will fail.

0reactions

IgnacioBecerracommented, Sep 30, 2021

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/6215/commits/6b6a7302e7979e85f74291d37a3d000e82a0ce59

@kennylam This is the code that originally gave out the error, specifically the TagGroup addition. Note that this compiles fine locally but it’s just the snapshot error that prevents this from compiling the deploy preview/merging.

Top Results From Across the Web

React Cards with Bootstrap - examples & tutorial

Add an optional header and/or footer within a card. Featured. Special title treatment. With supporting text below as a natural lead-in to additional...

React Card Component - CoreUI

Add an optional header and/or footer within a card. ... Use card groups to render cards as a single, attached element with equal...

How To Customize React Components with Props

Add a basic component that imports the CSS and returns an <h2> tag. prop-tutorial/src/components/AnimalCard/AnimalCard.js. import React from ' ...

4 Methods to Add Conditional Attributes to React Components

Today, conditional attributes are widely used with React to provide dynamic behaviors. But, most developers are not aware of all the methods ...

react-ui-cards - npm

Heart sign can be used as "Add to favorite" button. attribute, type, description. href, string/null, optional url the card will link to when ......