diff --git a/src/components/hy-box/readme.md b/src/components/hy-box/readme.md index 3571b840efec690436c3bd58aaa5b3fa39d9a334..fcb67c48057d29074c4a918fbd3496f8f0b02d86 100644 --- a/src/components/hy-box/readme.md +++ b/src/components/hy-box/readme.md @@ -30,7 +30,6 @@ - [hy-accordion-container](../accordion-container) - [hy-adjacent-image-text](../adjacent-image-text) - [hy-banner](../hy-banner) -- [hy-general-list](../hy-general-list) - [hy-heading](../heading) - [hy-hero](../hy-hero) - [hy-image](../image) @@ -51,7 +50,6 @@ graph TD; hy-accordion-container --> hy-box hy-adjacent-image-text --> hy-box hy-banner --> hy-box - hy-general-list --> hy-box hy-heading --> hy-box hy-hero --> hy-box hy-image --> hy-box diff --git a/src/components/hy-general-list-item/hy-general-list-item.scss b/src/components/hy-general-list-item/hy-general-list-item.scss index 5d4e87f30f6362b8597dbe54a44aadaffa915763..ba63dc04115046ccb465c9fe3a4718cf3f12b26e 100644 --- a/src/components/hy-general-list-item/hy-general-list-item.scss +++ b/src/components/hy-general-list-item/hy-general-list-item.scss @@ -1,3 +1,57 @@ :host { display: block; } + +.hy-general-list-item { + display: flex; + flex-direction: row; + font-family: var(--main-font-family); + position: relative; + margin-bottom: 1rem; + + &:hover { + cursor: pointer; + } + + &__image-container { + flex-basis: 33.3%; + position: relative; + } + &__text-container { + flex-basis: 66.6%; + padding-left: 2rem; + } + + &--image { + background-color: #ececec; + border: 1px solid red; + width: 100%; + height: 100%; + } + + &--label { + @include font-size(12px, 14px); + @include font-weight($bold); + background-color: var(--grayscale-black); + color: #ffffff; + letter-spacing: -0.1px; + padding: 5px 8px; + position: absolute; + top: 16px; + left: -8px; + text-transform: uppercase; + } + + &--title { + @include font-size(20px, 24px); + @include font-weight($bold); + color: var(--brand-main-nearly-black); + letter-spacing: -0.5px; + } + + &--description { + @include font-size(14px, 18px); + color: var(--grayscale-dark); + letter-spacing: -0.08px; + } +} diff --git a/src/components/hy-general-list-item/hy-general-list-item.tsx b/src/components/hy-general-list-item/hy-general-list-item.tsx index ce5ad71121ae6d3a9ca3f814086ac993bf275046..fcf24a1af7225f632473b0e771860a6e5dae1e22 100644 --- a/src/components/hy-general-list-item/hy-general-list-item.tsx +++ b/src/components/hy-general-list-item/hy-general-list-item.tsx @@ -33,7 +33,7 @@ export class HyGeneralListItem { return [ <div class={classAttributes} tabindex="0"> <div class={imageClassAttributes} style={aspectRatio}> - <img alt={this.imageAlt} class="hy-image__image" src={this.imageUrl} /> + <img alt={this.imageAlt} class="hy-general-list-item--image" src={this.imageUrl} /> <div class="hy-general-list-item--label">{this.label}</div> </div> <div class={contentClassAttributes}> diff --git a/src/components/hy-general-list/hy-general-list.tsx b/src/components/hy-general-list/hy-general-list.tsx index ebff727bd39844e9a290293ab177543033ab4a72..011ff501140455cf591a533a1fde502e229eeb20 100644 --- a/src/components/hy-general-list/hy-general-list.tsx +++ b/src/components/hy-general-list/hy-general-list.tsx @@ -43,7 +43,7 @@ export class HyGeneralList { return [ <div class={classAttributes}> {this._dataItems.map((x) => { - return ( + return [ <hy-general-list-item id={x.id} item-title={x.title} @@ -53,11 +53,10 @@ export class HyGeneralList { type={x.type} data-location={x.url} onClick={() => this.handleCardClick(x.id)} - ></hy-general-list-item> - ); + ></hy-general-list-item>, + ]; })} </div>, - <hy-box mb="1.75, 1.75, 2, 2.5" />, ]; } } diff --git a/src/components/hy-general-list/readme.md b/src/components/hy-general-list/readme.md index 2127658da2133fec2194429e6bb97162a48dd3ce..c36a4fa0f295562a8858aa977e25d0c2102038c1 100644 --- a/src/components/hy-general-list/readme.md +++ b/src/components/hy-general-list/readme.md @@ -13,14 +13,12 @@ ### Depends on - [hy-general-list-item](../hy-general-list-item) -- [hy-box](../hy-box) ### Graph ```mermaid graph TD; hy-general-list --> hy-general-list-item - hy-general-list --> hy-box style hy-general-list fill:#f9f,stroke:#333,stroke-width:4px ```