@synerise/ds-card-select 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.7.0...@synerise/ds-card-select@0.7.1) (2024-06-21)
+
+**Note:** Version bump only for package @synerise/ds-card-select
+
+
+
+
+
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.6.0...@synerise/ds-card-select@0.7.0) (2024-06-05)
+
+
+### Features
+
+* **card-select:** added items prop for rendering children ([838ae8d](https://github.com/Synerise/synerise-design/commit/838ae8db364a17589a7187f97e0a139c0bb673c5))
+
+
+
+
+
 # [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.5.44...@synerise/ds-card-select@0.6.0) (2024-05-31)
 
 

package/README.md

@@ -50,24 +50,22 @@ yarn add @synerise/ds-card-select
 
 | Property                   | Description                                                          | Type               | Default                                         |
 | -------------------------- | -------------------------------------------------------------------- | ------------------ | ----------------------------------------------- |
-| className                  | The name of the container                                            | string             | -                                               |
+| className                  | The className of the container                                            | string             | -                                               |
 | size                       | The size of the card                                                 | `small` / `medium` | `medium`                                        |
-| raised                     | Defines if the component casts shadow on the background              | boolean            | -                                               |
-| icon                       | Defines the URL of the icon                                          | string             | -                                               |
-| iconSize                   | Defines the size of the icon                                         | number             | 82 px for `medium` size, 48 px for `small` size |
-| title                      | Defines the title of the card                                        | string             | -                                               |
-| description                | Defines the description of the card (not available for `small` size) | string             | -                                               |
-| value                      | Defines if the card is selected by a user                            | boolean            |`false`                                          |
-| tickVisible                | Defines the display of the checkbox                                  | boolean            | `true`                                           |
+| raised                     | Defines border style              | boolean            | -                                               |
+| icon                       | Defines the icon                                           | ReactNode             | -                                               |
+| iconSize                   | Overwrites the predefined (82px for `medium` size, 48px for `small` size) size of the icon   | number             | - |
+| title                      | Defines the title of the card                                        | `ReactNode`             | -                                               |
+| description                | Defines the description of the card (not available for `small` size) | `ReactNode`             | -                                               |
+| value                      | Defines if the card is selected by a user                            | boolean            | `false`                                         |
+| tickVisible                | Defines the display of the checkbox                                  | boolean            | `true`                                          |
 | disabled                   | Defines if the card is disabled (`onChange` still fires)             | boolean            | -                                               |
 | customTickVisible          | Defines if the checkbox is custom                                    | boolean            | -                                               |
 | customTickVisibleComponent | Custom checkbox component                                            | ReactNode          | -                                               |
 | stretchToFit               | Aligns the height of each card                                       | boolean            | -                                               |
-| clearTooltip               | Defines the title of clear icon tooltip                              | string             | -                                               |
-| thickSize                  | The size of the thick                                                | `small` / `medium` | `medium`                                        |
 | theme                      | Palette of colors                                                    | string             | -                                               |
-| elementsPosition           | Defines the position of the elements on the card                     | string             | `center`                                        |
-| width                      | Defines the width of Group of cards                                  | `large` / `small`  | `large`                                         |
+| elementsPosition           | Defines the position of the elements on the card                     | `left` / `right` / `center`             | `center`                                        |
+
 | tagProps                   | Defines a ribbon-style tag                                           | `TagProps`         | -                                               |
 | tagTooltipProps            | Defines tooltip for the ribbon tag                                   | `TooltipProps`     | -                                               |
 
@@ -79,6 +77,17 @@ accepts a subset of TagProps. See @synerise/ds-tags for API
 Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>
 ```
 
+### CardSelectGroup
+
+| Property  | Description                                                                                   | Type                                     | Default                                 |
+|-----------|-----------------------------------------------------------------------------------------------|------------------------------------------|-----------------------------------------|
+| className | The name of the container                                                                     | string                                   | -                                       |
+| columns   | Defines the number of columns. Defaults to 2, set to null to render all items in a single row | number / null                            | -                                       |
+| children  | Deprecated. Use items prop instead                                                            | ReactNode                                | -                                       |
+| items     | Array of CardSelect props to render CardSelect child elements                                 | CardSelectProps & { key: string / numer} | -                                       |
+| width     | Defines the size of the gap between items. Deprecated, use size prop                          | `small` / `large`                        | 16px for `small`, 24px for `large` size |
+| size      | The size of the CardSelect items and gap between them                                         | `small` / `medium`                       | `medium`                                |
+
 
 ### Methods
 

package/dist/CardSelect.d.ts

@@ -1,15 +1,16 @@
 import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<{
-    title?: React.ReactNode;
     className?: string | undefined;
-    onChange?: ((value: boolean) => void) | undefined;
+    disabled?: boolean | undefined;
     onClick?: (() => void) | undefined;
+    title?: React.ReactNode;
+    onChange?: ((value: boolean) => void) | undefined;
+    key?: React.Key | undefined;
     stretchToFit?: boolean | undefined;
     error?: boolean | undefined;
     value?: boolean | undefined;
     raised?: boolean | undefined;
-    size?: "small" | "medium" | undefined;
-    disabled?: boolean | undefined;
+    size?: import("./CardSelect.types").CardSelectSizeType | undefined;
     description?: React.ReactNode;
     customTickVisible?: boolean | undefined;
     customTickVisibleComponent?: React.ReactNode;
@@ -17,30 +18,36 @@ declare const _default: React.ForwardRefExoticComponent<{
     icon?: React.ReactNode;
     iconSize?: number | undefined;
     tickSize?: number | undefined;
-    elementsPosition?: string | undefined;
+    elementsPosition?: import("./CardSelect.types").CardSelectAlignType | undefined;
     tagProps?: {
-        slot?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined;
+        id?: string | undefined;
         name?: string | undefined;
+        textColor?: string | undefined;
+        color?: string | undefined;
+        className?: string | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((() => void) & React.MouseEventHandler<HTMLDivElement>) | undefined;
+        prefixel?: React.ReactNode;
+        suffixel?: React.ReactNode;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
-        className?: string | undefined;
         contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
         hidden?: boolean | undefined;
-        id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         placeholder?: string | undefined;
+        slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined;
+        title?: string | undefined;
         translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: React.AriaRole | undefined;
@@ -58,7 +65,6 @@ declare const _default: React.ForwardRefExoticComponent<{
         autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
-        color?: string | undefined;
         itemProp?: string | undefined;
         itemScope?: boolean | undefined;
         itemType?: string | undefined;
@@ -205,7 +211,6 @@ declare const _default: React.ForwardRefExoticComponent<{
         onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
         onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-        onClick?: ((() => void) & React.MouseEventHandler<HTMLDivElement>) | undefined;
         onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
         onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
         onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
@@ -281,10 +286,6 @@ declare const _default: React.ForwardRefExoticComponent<{
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-        disabled?: boolean | undefined;
-        textColor?: string | undefined;
-        prefixel?: React.ReactNode;
-        suffixel?: React.ReactNode;
     } | undefined;
     tagTooltipProps?: import("@synerise/ds-tooltip").TooltipProps | undefined;
 } & {

package/dist/CardSelect.js

@@ -44,7 +44,10 @@ var CardSelect = function CardSelect(_ref) {
     onClick ? onClick() : onChange && onChange(!value);
     setIsPressed(true);
     setTimeout(function () {
-      if (tickIconRef !== null && tickIconRef.current !== null) tickIconRef.current.blur();
+      var _tickIconRef$current;
+
+      // eslint-disable-next-line no-unused-expressions
+      (_tickIconRef$current = tickIconRef.current) == null || _tickIconRef$current.blur();
     });
   };
 
@@ -60,9 +63,12 @@ var CardSelect = function CardSelect(_ref) {
   });
   return /*#__PURE__*/React.createElement(S.CardWrapper, {
     size: size,
+    className: "ds-card-select-wrapper",
     disabled: disabled,
     stretchToFit: stretchToFit,
-    hasTick: tickVisible || customTickVisible
+    hasTick: tickVisible || customTickVisible,
+    hasIcon: !!icon,
+    elementsPosition: elementsPosition
   }, tagElementWithTooltip, /*#__PURE__*/React.createElement(S.Container, {
     error: !!error,
     ref: wrapperRef,

package/dist/CardSelect.styles.d.ts

@@ -1,29 +1,30 @@
 import React from 'react';
 import { ThemeProps } from '@synerise/ds-core';
+import { CardSelectAlignType, CardSelectSizeType } from './CardSelect.types';
 export declare const RadioShape: import("styled-components").StyledComponent<"div", any, {
-    size?: string | undefined;
+    size?: CardSelectSizeType | undefined;
 }, never>;
 export declare const Title: import("styled-components").StyledComponent<"div", any, {
     hasIcon: boolean;
-    size?: string | undefined;
+    size?: CardSelectSizeType | undefined;
 }, never>;
 export declare const Description: import("styled-components").StyledComponent<"div", any, {
     hasTitle?: boolean | undefined;
     hasIcon?: boolean | undefined;
-    size?: string | undefined;
+    size?: CardSelectSizeType | undefined;
 }, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
-    size?: string | undefined;
+    size?: CardSelectSizeType | undefined;
 }, never>;
 export declare const Aside: import("styled-components").StyledComponent<"div", any, {
-    size?: string | undefined;
+    size?: CardSelectSizeType | undefined;
 }, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
     raised?: boolean | undefined;
     value?: boolean | undefined;
-    size?: string | undefined;
-    elementsPosition: string | 'left' | 'center' | 'right';
+    size?: CardSelectSizeType | undefined;
+    elementsPosition: CardSelectAlignType;
     selected?: boolean | undefined;
     pressed?: boolean | undefined;
     stretchToFit?: boolean | undefined;
@@ -38,14 +39,16 @@ export declare const TagRibbon: import("styled-components").StyledComponent<{
 }, any, {}, never>;
 export declare const Main: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TickIcon: import("styled-components").StyledComponent<"div", any, {
-    size?: string | undefined;
+    size?: CardSelectSizeType | undefined;
     disabled?: boolean | undefined;
     selected?: boolean | undefined;
-    elementsPosition: string | 'left' | 'center' | 'right';
+    elementsPosition: CardSelectAlignType;
 }, never>;
 export declare const CardWrapper: import("styled-components").StyledComponent<"div", any, {
-    size?: string | undefined;
+    size?: CardSelectSizeType | undefined;
     disabled?: boolean | undefined;
     stretchToFit?: boolean | undefined;
     hasTick?: boolean | undefined;
+    hasIcon?: boolean | undefined;
+    elementsPosition?: CardSelectAlignType | undefined;
 }, never>;

package/dist/CardSelect.styles.js

@@ -52,7 +52,7 @@ export var RadioShape = styled.div.withConfig({
 export var Title = styled.div.withConfig({
   displayName: "CardSelectstyles__Title",
   componentId: "tfmgtj-1"
-})(["text-align:center;color:", ";font-weight:", ";width:100%;font-size:", ";", ";"], getVar('grey-800'), function (props) {
+})(["text-align:center;color:", ";font-weight:", ";width:100%;font-size:", ";", ""], getVar('grey-800'), function (props) {
   return sizeCondition('400', '500', props);
 }, function (props) {
   return sizeCondition('13px', '14px', props);
@@ -104,11 +104,11 @@ export var Container = styled.div.withConfig({
 export var TagRibbonAnchor = styled.div.withConfig({
   displayName: "CardSelectstyles__TagRibbonAnchor",
   componentId: "tfmgtj-6"
-})(["display:flex;justify-content:flex-end;height:0;overflow:visible;"]);
+})(["display:flex;height:0;overflow:visible;"]);
 export var TagRibbon = styled(Tag).withConfig({
   displayName: "CardSelectstyles__TagRibbon",
   componentId: "tfmgtj-7"
-})(["position:relative;z-index:1;top:-12px;right:16px;margin:0;"]);
+})(["position:relative;z-index:1;top:-12px;margin:0;"]);
 export var Main = styled.div.withConfig({
   displayName: "CardSelectstyles__Main",
   componentId: "tfmgtj-8"
@@ -122,7 +122,15 @@ export var TickIcon = styled.div.withConfig({
 export var CardWrapper = styled.div.withConfig({
   displayName: "CardSelectstyles__CardWrapper",
   componentId: "tfmgtj-10"
-})(["position:relative;", " ", " ", "{padding-left:", "px;}"], is('disabled')(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n    cursor:not-allowed;\n  "]))), is('stretchToFit')(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n    height: 100%;\n  "]))), TagRibbonAnchor, function (props) {
+})(["position:relative;", " ", " ", "{", "}", "{justify-content:", ";padding-", ":", "px;}", "{", ":16px;}"], is('disabled')(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n    cursor:not-allowed;\n  "]))), is('stretchToFit')(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n    height: 100%;\n  "]))), Title, function (props) {
+  return props.hasTick && !props.hasIcon && css(["padding:0 24px;"]);
+}, TagRibbonAnchor, function (props) {
+  return props.elementsPosition === 'right' ? 'flex-start' : 'flex-end';
+}, function (props) {
+  return props.elementsPosition === 'left' ? 'right' : 'left';
+}, function (props) {
   var withTickOffset = props.size === 'small' ? TAG_LEFT_OFFSET_TICK_SMALL : TAG_LEFT_OFFSET_TICK_LARGE;
   return props.hasTick ? withTickOffset : TAG_LEFT_OFFSET;
+}, TagRibbon, function (props) {
+  return props.elementsPosition === 'left' ? 'left' : 'right';
 });

package/dist/CardSelect.types.d.ts

@@ -1,16 +1,19 @@
-import type { ReactNode } from 'react';
+import type { Key, ReactNode } from 'react';
 import type { TagProps } from '@synerise/ds-tags';
 import type { TooltipProps } from '@synerise/ds-tooltip';
 type CardSelectTagProps = Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>;
+export type CardSelectAlignType = 'left' | 'center' | 'right';
+export type CardSelectSizeType = 'small' | 'medium';
 export type CardSelectProps = {
     icon?: ReactNode;
+    key?: Key;
     raised?: boolean;
     description?: ReactNode;
     title?: ReactNode;
     value?: boolean;
     disabled?: boolean;
     tickVisible?: boolean;
-    size?: 'small' | 'medium';
+    size?: CardSelectSizeType;
     className?: string;
     iconSize?: number;
     tickSize?: number;
@@ -24,7 +27,7 @@ export type CardSelectProps = {
     };
     onChange?: (value: boolean) => void;
     onClick?: () => void;
-    elementsPosition?: string | 'left' | 'center' | 'right';
+    elementsPosition?: CardSelectAlignType;
     error?: boolean;
 };
 export {};

package/dist/CardSelectGroup/CardSelectGroup.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { CardSelectGroupProps } from './CardSelectGroup.types';
-declare const CardSelectGroup: React.FC<CardSelectGroupProps>;
+declare const CardSelectGroup: ({ className, children, items, size, width, columns, }: CardSelectGroupProps) => React.JSX.Element;
 export default CardSelectGroup;

package/dist/CardSelectGroup/CardSelectGroup.js

@@ -1,18 +1,32 @@
-import * as React from 'react';
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { Children } from 'react';
+import CardSelect from '../CardSelect';
 import * as S from './CardSelectGroup.styles';
+var DEFAULT_COLUMNS = 2;
+var DEFAULT_SIZE = 'large';
 
 var CardSelectGroup = function CardSelectGroup(_ref) {
   var className = _ref.className,
       children = _ref.children,
+      items = _ref.items,
+      size = _ref.size,
       _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'large' : _ref$width,
+      width = _ref$width === void 0 ? DEFAULT_SIZE : _ref$width,
       _ref$columns = _ref.columns,
-      columns = _ref$columns === void 0 ? 2 : _ref$columns;
-  return /*#__PURE__*/React.createElement(S.CardGroup, {
+      columns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns;
+  var cardsCount = (items == null ? void 0 : items.length) || Children.toArray(children).length;
+  return /*#__PURE__*/React.createElement(S.CardSelectGroupWrapper, {
     className: className,
-    width: width,
-    columns: columns
-  }, children);
+    size: size || width,
+    columns: columns,
+    itemsCount: cardsCount
+  }, items ? items.map(function (item) {
+    return /*#__PURE__*/React.createElement(CardSelect, _extends({}, item, {
+      key: item.key,
+      size: size || item.size
+    }));
+  }) : children);
 };
 
 export default CardSelectGroup;

package/dist/CardSelectGroup/CardSelectGroup.styles.d.ts

@@ -1,4 +1,10 @@
+export declare const CardSelectGroupWrapper: import("styled-components").StyledComponent<"div", any, {
+    itemsCount?: number | undefined;
+    size: 'small' | 'medium' | 'large';
+    columns: number | null;
+}, never>;
 export declare const CardGroup: import("styled-components").StyledComponent<"div", any, {
-    width: string;
-    columns: number;
+    itemsCount?: number | undefined;
+    size: 'small' | 'medium' | 'large';
+    columns: number | null;
 }, never>;

package/dist/CardSelectGroup/CardSelectGroup.styles.js

@@ -1,14 +1,11 @@
-import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
-
-export var CardGroup = styled.div.withConfig({
-  displayName: "CardSelectGroupstyles__CardGroup",
+import styled from 'styled-components';
+export var CardSelectGroupWrapper = styled.div.withConfig({
+  displayName: "CardSelectGroupstyles__CardSelectGroupWrapper",
   componentId: "sc-1xnksbf-0"
-})(["width:", ";background-color:white;padding:24px;display:grid;grid-template-columns:", ";column-gap:", ";row-gap:", ";.ds-card-select{width:100%;display:flex;flex:1;max-width:100%;min-width:0;}"], function (props) {
-  return props.width === 'large' ? '588px' : '338px';
-}, function (props) {
-  return new Array(props.columns).fill('1fr').join(' ');
+})(["padding:24px;display:grid;grid-template-columns:", ";gap:", ";"], function (props) {
+  return new Array(props.columns || props.itemsCount).fill('1fr').join(' ');
 }, function (props) {
-  return props.width === 'large' ? '24px' : '16px';
-}, function (props) {
-  return props.width === 'large' ? '24px' : '16px';
-});
+  return props.size === 'small' ? '16px' : '24px';
+}); // @deprecated - use CardSelectGroupWrapper instead
+
+export var CardGroup = CardSelectGroupWrapper;

package/dist/CardSelectGroup/CardSelectGroup.types.d.ts

@@ -1,7 +1,14 @@
-import * as React from 'react';
-export interface CardSelectGroupProps {
+import type { Key, ReactNode } from 'react';
+import { CardSelectProps } from '../CardSelect.types';
+type CardSelectPropsWithKey = Omit<CardSelectProps, 'key'> & {
+    key: Key;
+};
+export type CardSelectGroupProps = {
+    children?: ReactNode;
     className?: string;
-    children: React.ReactNode;
+    columns?: number | null;
+    items?: CardSelectPropsWithKey[];
+    size?: CardSelectProps['size'];
     width?: 'small' | 'large';
-    columns?: number;
-}
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card-select",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Card-Select UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,9 +33,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.62.0",
-    "@synerise/ds-tags": "^0.9.0",
-    "@synerise/ds-tooltip": "^0.14.29",
+    "@synerise/ds-icon": "^0.62.1",
+    "@synerise/ds-tags": "^0.9.1",
+    "@synerise/ds-tooltip": "^0.14.30",
     "styled-is": "^1.3.0"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.27.0"
   },
-  "gitHead": "9293cda82b432c10af1d230262afcc6f08f3dd99"
+  "gitHead": "ef835e848d4f02cca258130baa6c9f44dfa15dd0"
 }