@alfalab/core-components-pure-cell 4.11.5 → 4.12.0

package/moderncssm/index.module.css

@@ -0,0 +1,128 @@
+/* */
+
+.component {
+    text-align: unset;
+    box-sizing: border-box;
+}
+
+.horizontal {
+    display: flex;
+    width: 100%;
+}
+
+.vertical {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.button {
+    font-family: inherit;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+    transition: opacity 0.15s ease-in-out;
+    padding: 0
+}
+
+.button.hover {
+        opacity: 0.8;
+    }
+
+.button.active {
+        opacity: 0.6;
+    }
+
+.link {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    transition: opacity 0.15s ease-in-out
+}
+
+.link.hover {
+        opacity: 0.8;
+    }
+
+.link.active {
+        opacity: 0.6;
+    }
+
+.none {
+    padding: 0;
+}
+
+.airy {
+    padding: var(--gap-16) 0;
+}
+
+.default {
+    padding: var(--gap-12) 0;
+}
+
+.compact {
+    padding: var(--gap-8) 0;
+}
+
+.tiny {
+    padding: var(--gap-4) 0;
+}
+
+.noneTop {
+    padding-top: 0;
+}
+
+.airyTop {
+    padding-top: var(--gap-16);
+}
+
+.defaultTop {
+    padding-top: var(--gap-12);
+}
+
+.compactTop {
+    padding-top: var(--gap-8);
+}
+
+.tinyTop {
+    padding-top: var(--gap-4);
+}
+
+.noneBottom {
+    padding-bottom: 0;
+}
+
+.airyBottom {
+    padding-bottom: var(--gap-16);
+}
+
+.defaultBottom {
+    padding-bottom: var(--gap-12);
+}
+
+.compactBottom {
+    padding-bottom: var(--gap-8);
+}
+
+.tinyBottom {
+    padding-bottom: var(--gap-4);
+}
+
+.left {
+    padding-left: var(--gap-16);
+}
+
+.right {
+    padding-right: var(--gap-16);
+}
+
+.both {
+    padding-right: var(--gap-16);
+    padding-left: var(--gap-16);
+}
+
+.focused {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}

package/moderncssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getPureCellTestIds } from "../utils";

package/moderncssm/shared/index.js

@@ -0,0 +1 @@
+export { getPureCellTestIds } from '../utils.js';

package/moderncssm/utils.d.ts

@@ -0,0 +1,20 @@
+declare function getPureCellTestIds(dataTestId: string): {
+    pureCell: string;
+    addon: string;
+    amount: string;
+    amountText: string;
+    amountTitle: string;
+    coreAmountTitle: string;
+    categoryName: string;
+    categoryPercent: string;
+    categoryRightAddon: string;
+    content: string;
+    footer: string;
+    footerButton: string;
+    extraSubtitle: string;
+    graphics: string;
+    main: string;
+    textContent: string;
+    textValue: string;
+};
+export { getPureCellTestIds };

package/moderncssm/utils.js

@@ -0,0 +1,25 @@
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+
+function getPureCellTestIds(dataTestId) {
+    return {
+        pureCell: dataTestId,
+        addon: getDataTestId(dataTestId, 'addon'),
+        amount: getDataTestId(dataTestId, 'amount'),
+        amountText: getDataTestId(dataTestId, 'amount-text'),
+        amountTitle: getDataTestId(dataTestId, 'amount-title'),
+        coreAmountTitle: getDataTestId(dataTestId, 'core-amount-title'),
+        categoryName: getDataTestId(dataTestId, 'category-name'),
+        categoryPercent: getDataTestId(dataTestId, 'category-percent'),
+        categoryRightAddon: getDataTestId(dataTestId, 'category-right-addon'),
+        content: getDataTestId(dataTestId, 'content'),
+        footer: getDataTestId(dataTestId, 'footer'),
+        footerButton: getDataTestId(dataTestId, 'button'),
+        extraSubtitle: getDataTestId(dataTestId, 'footer-title'),
+        graphics: getDataTestId(dataTestId, 'graphics'),
+        main: getDataTestId(dataTestId, 'main'),
+        textContent: getDataTestId(dataTestId, 'text_content'),
+        textValue: getDataTestId(dataTestId, 'text_value'),
+    };
+}
+
+export { getPureCellTestIds };

package/moderncssm/vars.css

@@ -0,0 +1,2 @@
+/* */
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pure-cell",
-    "version": "4.11.5",
+    "version": "4.12.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,10 +15,10 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-amount": "^3.5.2",
-        "@alfalab/core-components-button": "^11.5.4",
-        "@alfalab/core-components-typography": "^4.8.0",
-        "@alfalab/core-components-comment": "^2.3.7",
+        "@alfalab/core-components-amount": "^3.6.0",
+        "@alfalab/core-components-button": "^11.6.0",
+        "@alfalab/core-components-typography": "^4.10.0",
+        "@alfalab/core-components-comment": "^2.4.0",
         "@alfalab/core-components-shared": "^0.12.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/data": "^1.8.0",
@@ -26,6 +26,6 @@
         "react-merge-refs": "1.1.0",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.1",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

package/src/components/addon/index.module.css

@@ -14,11 +14,11 @@
     }
 
     &.default {
-        padding-left: var(--gap-m);
+        padding-left: var(--gap-16);
     }
 
     &.addonPadding {
-        padding-left: var(--gap-m);
+        padding-left: var(--gap-16);
     }
 
     &.auto {

package/src/components/amount/index.module.css

@@ -1,6 +1,6 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
-    padding: var(--gap-3xs) 0;
+    padding: var(--gap-2) 0;
     display: flex;
 }

package/src/components/amount-title/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     display: flex;

package/src/components/category/index.module.css

@@ -1,9 +1,9 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     display: flex;
     overflow: hidden;
-    padding: var(--gap-3xs) 0;
+    padding: var(--gap-2) 0;
 }
 
 .categoryName {
@@ -15,12 +15,12 @@
 }
 
 .categoryPercent {
-    padding: 0 var(--gap-xs);
+    padding: 0 var(--gap-8);
     background-color: var(--color-light-base-bg-secondary);
     border-radius: var(--border-radius-xl);
-    margin-left: var(--gap-2xs);
+    margin-left: var(--gap-4);
 }
 
 .rightAddon {
-    margin-left: var(--gap-2xs);
+    margin-left: var(--gap-4);
 }

package/src/components/content/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     flex-basis: 100%;

package/src/components/footer/index.module.css

@@ -1,15 +1,15 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     grid-column: 1/3;
     display: grid;
-    grid-row-gap: var(--gap-xs);
+    grid-row-gap: var(--gap-8);
 
     &.none {
         margin-top: 0;
     }
 
     &.default {
-        margin-top: var(--gap-xs);
+        margin-top: var(--gap-8);
     }
 }

package/src/components/footer-button/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     justify-self: start;

package/src/components/graphics/index.module.css

@@ -23,19 +23,19 @@
     }
 
     &.airy {
-        margin-right: var(--gap-m);
+        margin-right: var(--gap-16);
     }
 
     &.default {
-        margin-right: var(--gap-s);
+        margin-right: var(--gap-12);
     }
 
     &.compact {
-        margin-right: var(--gap-xs);
+        margin-right: var(--gap-8);
     }
 
     &.tiny {
-        margin-right: var(--gap-2xs);
+        margin-right: var(--gap-4);
     }
 }
 
@@ -44,19 +44,19 @@
         margin-bottom: 0;
     }
     &.airy {
-        margin-bottom: var(--gap-m);
+        margin-bottom: var(--gap-16);
     }
 
     &.default {
-        margin-bottom: var(--gap-s);
+        margin-bottom: var(--gap-12);
     }
 
     &.compact {
-        margin-bottom: var(--gap-xs);
+        margin-bottom: var(--gap-8);
     }
 
     &.tiny {
-        margin-bottom: var(--gap-2xs);
+        margin-bottom: var(--gap-4);
     }
 }
 

package/src/components/main/index.module.css

@@ -9,7 +9,7 @@
     white-space: pre-line;
 
     &.vertical {
-        grid-row-gap: var(--gap-3xs);
+        grid-row-gap: var(--gap-2);
         justify-content: center;
         align-items: center;
 

package/src/components/text/index.module.css

@@ -1,7 +1,7 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .horizontal {
-    padding: var(--gap-3xs) 0;
+    padding: var(--gap-2) 0;
 }
 
 .rowLimit1 {
@@ -18,7 +18,7 @@
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
-    margin: var(--gap-3xs) 0;
+    margin: var(--gap-2) 0;
     word-break: break-word;
 }
 
@@ -29,6 +29,6 @@
 }
 
 .title + .value {
-    margin-left: var(--gap-m);
+    margin-left: var(--gap-16);
     flex-shrink: 0;
 }

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     text-align: unset;
@@ -53,19 +53,19 @@
 }
 
 .airy {
-    padding: var(--gap-m) 0;
+    padding: var(--gap-16) 0;
 }
 
 .default {
-    padding: var(--gap-s) 0;
+    padding: var(--gap-12) 0;
 }
 
 .compact {
-    padding: var(--gap-xs) 0;
+    padding: var(--gap-8) 0;
 }
 
 .tiny {
-    padding: var(--gap-2xs) 0;
+    padding: var(--gap-4) 0;
 }
 
 .noneTop {
@@ -73,19 +73,19 @@
 }
 
 .airyTop {
-    padding-top: var(--gap-m);
+    padding-top: var(--gap-16);
 }
 
 .defaultTop {
-    padding-top: var(--gap-s);
+    padding-top: var(--gap-12);
 }
 
 .compactTop {
-    padding-top: var(--gap-xs);
+    padding-top: var(--gap-8);
 }
 
 .tinyTop {
-    padding-top: var(--gap-2xs);
+    padding-top: var(--gap-4);
 }
 
 .noneBottom {
@@ -93,32 +93,32 @@
 }
 
 .airyBottom {
-    padding-bottom: var(--gap-m);
+    padding-bottom: var(--gap-16);
 }
 
 .defaultBottom {
-    padding-bottom: var(--gap-s);
+    padding-bottom: var(--gap-12);
 }
 
 .compactBottom {
-    padding-bottom: var(--gap-xs);
+    padding-bottom: var(--gap-8);
 }
 
 .tinyBottom {
-    padding-bottom: var(--gap-2xs);
+    padding-bottom: var(--gap-4);
 }
 
 .left {
-    padding-left: var(--gap-m);
+    padding-left: var(--gap-16);
 }
 
 .right {
-    padding-right: var(--gap-m);
+    padding-right: var(--gap-16);
 }
 
 .both {
-    padding-right: var(--gap-m);
-    padding-left: var(--gap-m);
+    padding-right: var(--gap-16);
+    padding-left: var(--gap-16);
 }
 
 .focused {

package/src/vars.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 :root {
     --pure-cell-clickable-area-hover-opacity: 1;