@fluid-topics/ft-card 2.0.22 → 2.0.23

package/build/ftds-card.styles.js

@@ -0,0 +1,231 @@
+import { css } from "lit";
+import { card, link, } from "@fluid-topics/design-system-variables";
+import { FtdsTypographyVariants } from "@fluid-topics/ft-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;
+    }
+
+    #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 {
+        background-color: ${card.selectableUnselectedHoverBackgroundColor};
+        border: ${card.selectableUnselectedBorderWidth} solid ${card.selectableUnselectedHoverBorderColor};
+    }
+
+    #container.ftds-card--selectable:not(.ftds-card--selected):focus {
+        background-color: ${card.selectableUnselectedFocusBackgroundColor};
+        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 {
+        background-color: ${card.nonSelectableHoverBackgroundColor};
+        border: ${card.nonSelectableBorderWidth} solid ${card.nonSelectableHoverBorderColor};
+    }
+
+    #container.ftds-card--clickable:not(.ftds-card--selectable):focus {
+        background-color: ${card.nonSelectableFocusBackgroundColor};
+        border: ${card.nonSelectableBorderWidth} solid ${card.nonSelectableFocusBorderColor};
+    }
+`;

package/build/index.d.ts

@@ -1,4 +1,13 @@
 export * from "./ft-card";
 export * from "./ft-card.styles";
 export * from "./ft-card.properties";
+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

@@ -1,4 +1,13 @@
 export * from "./ft-card";
 export * from "./ft-card.styles";
 export * from "./ft-card.properties";
+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

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-card",
-    "version": "2.0.22",
+    "version": "2.0.23",
     "description": "A file uploader with drag and drop",
     "keywords": [
         "Lit"
@@ -19,10 +19,10 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-ripple": "2.0.22",
-        "@fluid-topics/ft-typography": "2.0.22",
-        "@fluid-topics/ft-wc-utils": "2.0.22",
+        "@fluid-topics/ft-ripple": "2.0.23",
+        "@fluid-topics/ft-typography": "2.0.23",
+        "@fluid-topics/ft-wc-utils": "2.0.23",
         "lit": "3.1.0"
     },
-    "gitHead": "d9041c5b74c6702d44fe9ec9934b3134bdfb76ad"
+    "gitHead": "e441ae21f5027730992e39b7dc728ac0f7b17dc0"
 }