Merge pull request #119 from catenax-ng/feat/613/NewCardDesignAdded

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.1.43
+
+- Rename previous Content Cards with Marketplace Card
+- New Content Card created in the cards list
+
 ## 2.1.42
 
 - UI Improvements (CSS changes)

DEPENDENCIES

@@ -1371,7 +1371,7 @@ npm/npmjs/@types/parse-json/4.0.0, MIT, approved, clearlydefined
 npm/npmjs/@types/prettier/2.7.3, MIT, approved, #9030
 npm/npmjs/@types/pretty-hrtime/1.0.1, MIT, approved, clearlydefined
 npm/npmjs/@types/prop-types/15.7.5, MIT, approved, clearlydefined
-npm/npmjs/@types/qs/6.9.7, MIT, approved, #13990
+npm/npmjs/@types/qs/6.9.7, MIT, approved, #13991
 npm/npmjs/@types/range-parser/1.2.4, MIT, approved, #10795
 npm/npmjs/@types/react-dom/18.2.6, MIT, approved, #8256
 npm/npmjs/@types/react-is/18.2.1, MIT, approved, #9131

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.42",
+  "version": "2.1.43",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/@types/styles.ts

@@ -121,12 +121,14 @@ declare module '@mui/material/styles' {
     inactive: string
     created: string
     inReview: string
+    enabled: string
     default: string
     bgRelease: string
     bgActive: string
     bgInactive: string
     bgCreated: string
     bgInReview: string
+    bgEnabled: string
     bgDefault: string
   }
   interface PaletteColor {

src/components/content/Cards/CardChip.tsx

@@ -28,6 +28,7 @@ export enum StatusVariants {
   inactive = 'inactive',
   created = 'created',
   inReview = 'in_review',
+  enabled = 'enabled'
 }
 
 export type Variants =
@@ -36,6 +37,7 @@ export type Variants =
   | StatusVariants.inactive
   | StatusVariants.created
   | StatusVariants.inReview
+  | StatusVariants.enabled
 
 export interface CardChipProps {
   status?: Variants
@@ -69,6 +71,10 @@ export const CardChip = ({ status, statusText }: CardChipProps) => {
         setChipColor(theme.palette.chip.inReview)
         setChipBackground(theme.palette.chip.bgInReview)
         break
+      case StatusVariants.enabled:
+        setChipColor(theme.palette.chip.enabled)
+        setChipBackground(theme.palette.chip.bgEnabled)
+        break
       default:
         setChipColor(theme.palette.chip.default)
         setChipBackground(theme.palette.chip.bgDefault)

src/components/content/Cards/ContentCard.stories.tsx

@@ -0,0 +1,42 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { ComponentStory } from '@storybook/react'
+
+import { ContentCard as Component } from './ContentCard'
+
+export default {
+  title: 'Cards',
+  component: Component,
+  argTypes: {},
+}
+
+const Template: ComponentStory<typeof Component> = (args: any) => (
+  <Component {...args} />
+)
+
+const item = {
+    title: 'ISO_14001_EMAS_or_national_certification',
+    chipText: 'ISO_14001_EMAS_or_national_certification',
+    heading: 'Business Partner Level: ',
+    detail: 'BPN1, BPN2, BPN3, BPN4',
+}
+
+export const ContentCard = Template.bind({})
+ContentCard.args = item

src/components/content/Cards/ContentCard.tsx

@@ -0,0 +1,114 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Box, Typography, useTheme } from '@mui/material'
+import { CardChip, StatusVariants } from './CardChip'
+
+export interface ContentCardProps {
+    title: string
+    chipText: string
+    heading?: string
+    detail?: string
+}
+
+export const ContentCard = ({
+    title,
+    chipText,
+    heading,
+    detail
+}: ContentCardProps) => {
+    const theme = useTheme()
+
+    return (
+        <Box
+            key={title}
+            sx={{
+                width: '270px',
+                minWidth: '270px',
+                paddingRight: '10px',
+                paddingLeft: '10px',
+                marginBottom: '20px',
+            }}
+        >
+            <Box
+                sx={{
+                    height: '200px',
+                    width: 'auto',
+                    boxSizing: 'border-box',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: '16px 28px',
+                    background: '#FFFFFF',
+                    border: '1px solid #DCDCDC',
+                    borderRadius: '20px',
+                    flex: 'none',
+                    order: 1,
+                    alignSelf: 'stretch',
+                    flexGrow: 0,
+                    cursor: 'pointer',
+                    ':hover': {
+                        boxShadow: theme.shadows['20'],
+                    },
+                }}
+            >
+                <Box sx={{ marginBottom: '20px' }}>
+                    <CardChip status={StatusVariants.enabled} statusText={chipText} />
+                </Box>
+                <Typography
+                    variant="h4"
+                    sx={{
+                        height: '60px',
+                        '-webkit-line-clamp': '2',
+                        lineClamp: '2',
+                        display: '-webkit-box',
+                        '-webkit-box-orient': 'vertical',
+                        boxOrient: 'vertical',
+                        wordBreak: 'break-all',
+                        overflow: 'hidden',
+                        marginBottom: '6px'
+                    }}
+                >
+                    {title}
+                </Typography>
+                {
+                    detail &&
+                    <Box sx={{ lineHeight: 'normal' }}>
+                        <Typography
+                            variant="body3"
+                            sx={{
+                                fontSize: '12px',
+                                fontWeight: '600'
+                            }}
+                        >
+                            {heading}
+                        </Typography>
+                        <Typography
+                            variant="body3"
+                            sx={{
+                                fontSize: '12px'
+                            }}
+                        >
+                            {detail}
+                        </Typography>
+                    </Box>
+                }
+            </Box>
+        </Box>
+    )
+}

src/components/content/Cards/ContentCards.stories.tsx → src/components/content/Cards/MarketplaceCard.stories.tsx

@@ -110,8 +110,8 @@ const submenuOptions = [
   },
 ]
 
-export const ContentCards = Template.bind({})
-ContentCards.args = {
+export const MarketplaceCard = Template.bind({})
+MarketplaceCard.args = {
   columns: 6,
   items: items,
   variant: 'compact',

src/components/index.tsx

@@ -94,6 +94,7 @@ export { SortOption } from './basic/SortOption'
 export { ParentSubNavigation } from './basic/SubNavigation/ParentSubNavigation'
 export { Expand } from './basic/Expand'
 export { AboutCard } from './content/Cards/AboutCard'
+export { ContentCard } from './content/Cards/ContentCard'
 export { LinearProgressWithValueLabel } from './basic/Progress/LinearProgress/LinearProgressWithValueLabel'
 export { ErrorBar } from './basic/ErrorBar/ErrorBar'
 export { NewSubNavigation } from './basic/NewSubNavigation'

src/theme.ts

@@ -105,12 +105,14 @@ export const paletteDefinitions = {
     inactive: '#D91E18',
     created: '#8f8013',
     inReview: '#8f8013',
+    enabled: '#007877',
     default: '#888888',
     bgRelease: '#EAF1FE',
     bgActive: '#F0F5D5',
     bgInactive: '#FFF7FF',
     bgCreated: '#f5efd5',
     bgInReview: '#f5efd5',
+    bgEnabled: '#DEEEEF',
     bgDefault: '#c7c5c5',
   },
   stepper: {