hds-web 1.0.1 → 1.0.3

package/src/HDS/modules/TextCard/textCard.js

@@ -0,0 +1,132 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { HDSButton } from '../../components/Buttons';
+import { Icon } from '../../components/common-components/Icon';
+
+export default function TextCard(props) {
+  const titleColor = HDSColor(props.title_color);
+  console.log(props.descriptions);
+  return (
+    <>
+      {
+        props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-8 tb-l:w-1/2`}>{props.title}</Typography>)
+      }
+      <div className={'grid grid-cols-1 tb:grid-cols-2 gap-10' + ((props.feature_cards_links) ? ' tb:gap-0 tb-l:gap-0' : ' tb:gap-16 tb-l:gap-36')}>
+        <div>
+          {
+            !props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-6`}>{props.title}</Typography>)
+          }
+          {
+            props.descriptions && props.descriptions.map((desc, i) => (
+              <Typography key={i} textStyle="body1" className="pb-6">{desc.description}</Typography>
+            ))
+          }
+          {
+            props.descriptions_list && (
+              <div className="pb-6">
+              {
+                props.descriptions_list && props.descriptions_list.map((descList, j) => {
+                  const iconBgColor = HDSColor(descList.icon_bg_color);
+                  const iconColor = HDSColor(descList.icon_color);
+                  return (
+                    <div className='flex items-start pb-4 last:pb-0' key={j}>
+                      <div className={`${iconBgColor} w-6 h-6 rounded-full mr-2 flex items-center justify-center`}>
+                        <Icon
+                          height={`h-3 w-3 stroke-[1.5px]` }
+                          variant={descList.icon_name}
+                          strokeColor={iconColor}
+                        />
+                      </div>
+                      <Typography textStyle='body1' className='text-neutral-1000'>{descList.description}</Typography>
+                    </div>
+                  )
+                })
+              }
+              </div>
+            )
+          }
+          {
+            props.feature_cards_links && (
+              <div className='border border-neutral-150 rounded-2xl tb:rounded-e-none'>
+                {
+                  props.feature_cards_links.map((list, i) => {
+                    const currentStrokeColor = HDSColor(list.icon_color)
+                    return (
+                      <div className='border-b border-b-neutral-150 last:border-b-0'>
+                        <div className='m-2 p-6 rounded-lg hover:bg-neutral-100' key={i}>
+                          <div className='flex items-center pb-4'>
+                            <Icon
+                              height={`w-6 h-6 mr-2 stroke-[1.5px]` }
+                              variant={list.icon_name}
+                              strokeColor={currentStrokeColor}
+                            />
+                            <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
+                          </div>
+                          {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-1000'>{list.description}</Typography>}
+                          {
+                            list.descriptions_list && list.descriptions_list.map((descList, j) => {
+                              const iconBgColor = HDSColor(descList.icon_bg_color);
+                              const iconColor = HDSColor(descList.icon_color);
+                              return (
+                                <div className='flex items-start pb-4 last:pb-0' key={j}>
+                                  <div className={`${iconBgColor} w-5 h-5 rounded-full mr-2 flex items-center justify-center`}>
+                                    <Icon
+                                      height={`h-3 w-3 stroke-[1.5px]` }
+                                      variant={descList.icon_name}
+                                      strokeColor={iconColor}
+                                    />
+                                  </div>
+                                  <Typography textStyle='body3' className='text-neutral-1000'>{descList.description}</Typography>
+                                </div>
+                              )
+                            })
+                          }
+                          {
+                            props.button && (
+                              <HDSButton
+                                label={props.button.cta_text}
+                                type='primaryLink'
+                                leftIconVariant='none'
+                                rightIconVariant='none'
+                                state='default'
+                                size='md'
+                                rightAnimatedArrow={true}
+                                rightAnimatedArrowColor='#3970FD'
+                              />
+                            )
+                          }
+                        </div>
+                      </div>
+                    )
+                  })
+                }
+              </div>
+            )
+          }
+          {
+            props.button && (
+              <HDSButton
+                label={props.button.cta_text}
+                type='secondary'
+                leftIconVariant='none'
+                rightIconVariant='none'
+                state='default'
+                size='md'
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor='#3970FD'
+            />
+            )
+          }
+        </div>
+        <div>
+          {
+            props.img_url && (
+              <img src={props.img_url} alt={props.title} />
+            )
+          }
+        </div>
+      </div>
+    </>
+  )
+}

package/src/HDS/modules/index.js

@@ -0,0 +1 @@
+export * from './TextCard';