@fluid-topics/ftds-card 2.1.0

package/build/ftds-card.properties.d.ts

@@ -0,0 +1,7 @@
+export interface FtdsCardProperties {
+    headerText?: string;
+    headerBorder?: boolean;
+    headerHref?: string;
+    selectable?: boolean;
+    selected?: boolean;
+}

package/build/ftds-card.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-card.styles.d.ts

@@ -0,0 +1,51 @@
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+export declare const FtdsCardCssVariables: {
+    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    focusFocusRingColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    focusOutlineWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    focusOutlineOffset: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerTitleHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerTitleVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerActionHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerActionVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerActionGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    bodyHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    bodyVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    footerActionHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    footerActionVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    footerActionGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    footerContentHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    footerContentVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    sideBarHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    sideBarVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    sideBarGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    nonSelectableBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    nonSelectableStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    nonSelectableDefaultBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    nonSelectableDefaultBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    nonSelectableHoverBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    nonSelectableHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    nonSelectableFocusBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    nonSelectableFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    internalBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableUnselectedBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableUnselectedStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableUnselectedDefaultBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableUnselectedDefaultBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableUnselectedHoverBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableUnselectedHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableUnselectedFocusBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableUnselectedFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableSelectedBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableSelectedBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableSelectedStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableSelectedBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableSelectedDefaultStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableSelectedHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectableSelectedFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    internalBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+};
+export declare const FtdsCardTypographies: {
+    header: FtdsTypographyVariants;
+};
+export declare const designSystemStyles: import("lit").CSSResult;

package/build/ftds-card.styles.js

@@ -0,0 +1,233 @@
+import { css } from "lit";
+import { card, link, } from "@fluid-topics/design-system-variables";
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
+export const FtdsCardCssVariables = {
+    ...card,
+};
+export const FtdsCardTypographies = {
+    header: FtdsTypographyVariants.body1semibold,
+};
+// language=CSS
+export const designSystemStyles = css `
+    :host {
+        display: block;
+        height: stretch;
+    }
+
+    #container {
+        position: relative;
+        overflow: hidden;
+        border-radius: ${card.borderRadius};
+        display: flex;
+        align-items: stretch;
+        height: stretch;
+    }
+
+    #container.ftds-card--clickable {
+        cursor: pointer;
+    }
+
+    #container:focus-visible,
+    #container:has(a:focus-visible) {
+        outline: ${card.focusOutlineWidth} solid ${card.focusFocusRingColor};
+        outline-offset: ${card.focusOutlineOffset};
+        border-radius: ${card.borderRadius};
+    }
+
+    #container:focus {
+        outline: none;
+    }
+
+    #container:focus-visible {
+        outline: 2px solid ${card.focusFocusRingColor};
+        outline-offset: 2px;
+    }
+
+    #header a {
+        text-decoration: none;
+        color: ${link.neutralDefaultColor};
+    }
+
+    #header a:focus {
+        outline: none;
+    }
+
+    #header a:before {
+        content: "";
+        position: absolute;
+        inset: 0;
+    }
+
+    #main {
+        min-width: 0;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    #header {
+        display: flex;
+        justify-content: space-between;
+
+        #header-title {
+            min-width: 0;
+            padding: ${card.headerTitleVerticalPadding} ${card.headerTitleHorizontalPadding};
+        }
+
+        ftds-typography, a {
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            text-overflow: ellipsis;
+            word-break: break-word;
+            -webkit-line-clamp: 2;
+        }
+
+        #header-actions {
+            padding: ${card.headerActionVerticalPadding} ${card.headerActionHorizontalPadding} ${card.headerActionVerticalPadding} 0;
+
+            slot[name="header-actions"] {
+                display: flex;
+                gap: ${card.headerActionGap};
+            }
+        }
+    }
+
+    .ftds-card--header-border #header {
+        border-bottom: ${card.internalBorderWidth} solid ${card.internalBorderColor};
+    }
+
+    .ftds-card--no-header #header {
+        display: none;
+    }
+
+    .ftds-card--no-header-actions #header-actions {
+        display: none;
+    }
+
+    #body {
+        padding: 0 ${card.bodyHorizontalPadding} ${card.bodyVerticalPadding} ${card.bodyHorizontalPadding};
+        flex-grow: 1;
+    }
+
+    .ftds-card--header-border #body, .ftds-card--no-header #body {
+        padding: ${card.bodyVerticalPadding} ${card.bodyHorizontalPadding};
+    }
+
+    .ftds-card--no-body #body {
+        display: none;
+    }
+
+    #footer {
+        border-top: ${card.internalBorderWidth} solid ${card.internalBorderColor};
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        #footer-text {
+            padding: ${card.footerContentVerticalPadding} ${card.footerContentHorizontalPadding};
+
+            slot[name="footer"] {
+                display: flex;
+                align-items: center;
+            }
+        }
+
+        #footer-actions {
+            padding: ${card.footerActionVerticalPadding} ${card.footerActionHorizontalPadding} ${card.footerActionVerticalPadding} 0;
+
+            slot[name="footer-actions"] {
+                display: flex;
+                gap: ${card.footerActionGap};
+
+            }
+        }
+    }
+
+    .ftds-card--no-footer #footer {
+        display: none;
+    }
+
+    .ftds-card--no-body.ftds-card--no-header #footer {
+        border-top: none;
+    }
+
+    .ftds-card--no-footer-actions #footer-actions {
+        display: none;
+    }
+
+    #side-bar {
+        padding: ${card.sideBarVerticalPadding} ${card.sideBarHorizontalPadding};
+        border-left: ${card.internalBorderWidth} solid ${card.internalBorderColor};
+
+        slot[name="side-bar"] {
+            display: flex;
+            flex-direction: column;
+            gap: ${card.sideBarGap};
+        }
+    }
+
+    .ftds-card--no-side-bar #side-bar {
+        display: none;
+    }
+
+
+    /* SPECIFICATIONS FOR INTERACTIVE CARDS */
+    /* selectable selected */
+    #container.ftds-card--selected {
+        background-color: ${card.selectableSelectedBackgroundColor};
+        border: ${card.selectableSelectedBorderWidth} solid ${card.selectableSelectedBorderColor};
+
+        .ftds-card--header-border #header {
+            border-bottom: ${card.selectableSelectedBorderWidth} solid ${card.selectableSelectedBorderColor};;
+        }
+
+        ft-ripple {
+            ${FtRippleCssVariables.color.set(card.selectableSelectedStateLayerColor)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceSelected.set(card.selectableSelectedDefaultStateLayerOpacity)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(card.selectableSelectedFocusStateLayerOpacity)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(card.selectableSelectedHoverStateLayerOpacity)};
+        }
+    }
+
+    /* selectable unselected */
+    #container.ftds-card--selectable:not(.ftds-card--selected) {
+        background-color: ${card.selectableUnselectedDefaultBackgroundColor};
+        border: ${card.selectableUnselectedBorderWidth} solid ${card.selectableUnselectedDefaultBorderColor};
+
+        ft-ripple {
+            ${FtRippleCssVariables.color.set(card.selectableUnselectedStateLayerColor)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(card.selectableUnselectedFocusStateLayerOpacity)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(card.selectableUnselectedHoverStateLayerOpacity)};
+        }
+    }
+
+    #container.ftds-card--selectable:not(.ftds-card--selected):hover {
+        border: ${card.selectableUnselectedBorderWidth} solid ${card.selectableUnselectedHoverBorderColor};
+    }
+
+    #container.ftds-card--selectable:not(.ftds-card--selected):focus {
+        border: ${card.selectableUnselectedBorderWidth} solid ${card.selectableUnselectedFocusBorderColor};
+    }
+
+    /* not selectable */
+    #container:not(.ftds-card--selectable) {
+        background-color: ${card.nonSelectableDefaultBackgroundColor};
+        border: ${card.nonSelectableBorderWidth} solid ${card.nonSelectableDefaultBorderColor};
+
+        ft-ripple {
+            ${FtRippleCssVariables.color.set(card.nonSelectableStateLayerColor)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(card.nonSelectableFocusStateLayerOpacity)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(card.nonSelectableHoverStateLayerOpacity)};
+        }
+    }
+
+    #container.ftds-card--clickable:not(.ftds-card--selectable):hover {
+        border: ${card.nonSelectableBorderWidth} solid ${card.nonSelectableHoverBorderColor};
+    }
+
+    #container.ftds-card--clickable:not(.ftds-card--selectable):focus {
+        border: ${card.nonSelectableBorderWidth} solid ${card.nonSelectableFocusBorderColor};
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./ftds-card";
+export * from "./ftds-card.styles";
+export * from "./ftds-card.properties";
+export * from "./ftds-card-user-info";
+export * from "./ftds-card-user-info.styles";
+export * from "./ftds-card-user-info.properties";
+export * from "./ftds-card-labelled-info";
+export * from "./ftds-card-labelled-info.styles";
+export * from "./ftds-card-labelled-info.properties";
+import "./define";

package/build/index.js

@@ -0,0 +1,10 @@
+export * from "./ftds-card";
+export * from "./ftds-card.styles";
+export * from "./ftds-card.properties";
+export * from "./ftds-card-user-info";
+export * from "./ftds-card-user-info.styles";
+export * from "./ftds-card-user-info.properties";
+export * from "./ftds-card-labelled-info";
+export * from "./ftds-card-labelled-info.styles";
+export * from "./ftds-card-labelled-info.properties";
+import "./define";

package/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@fluid-topics/ftds-card",
+    "version": "2.1.0",
+    "description": "The design system card component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-card.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/ft-ripple": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "@fluid-topics/ftds-icon": "2.1.0",
+        "@fluid-topics/ftds-typography": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}