@coorpacademy/components 11.40.0 → 11.40.1-alpha.11

package/lib/molecule/quick-filters/style.css

@@ -0,0 +1,119 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value cm_grey_100 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+@value cm_primary_blue from colors;
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+.filtersMainContainer {
+    composes: textBase;
+    display: flex;
+    align-items: center;
+}
+
+.filtersContainer {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.filtersList {
+    overflow-x: auto;
+    scrollbar-width: none;
+    align-items: center;
+    display: flex;
+    flex: 1;
+    position: relative;
+    margin-right: 40px;
+}
+
+.filterOption, .defaultOption {
+    display: flex;
+    color: cm_grey_500;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    flex-shrink: 0;
+    height: 72px;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+.filterSelected {
+    color: cm_grey_700;
+    border-bottom: 2px solid cm_primary_blue;
+}
+
+.filterLabel {
+    min-width: 70px;
+}
+
+.filterSeparator {
+    padding: 24px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.filterSeparator::before {
+  content: '';
+  width: 1px;
+  height: 24px;
+  background-color: cm_grey_100;
+}
+
+.filterButton {
+    margin-left: auto;
+    box-sizing: border-box;
+}
+
+.leftArrowButton, .rightArrowButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    background-color: cm_grey_100;
+    border-radius: 50%;
+    position: sticky;
+    z-index: 1;
+    transform: translateY(-10%);
+}
+
+.rightArrowButton {
+  right: 0;         
+  box-shadow: -20px 0 40px 40px white, 30px  0 40px 40px white;
+}
+
+.leftArrowButton {
+  left: 0;          
+  box-shadow: 20px 0 40px 40px white;
+}
+
+.filterButtonWrapper {
+    padding: 2px;
+    border-radius: 16px;
+    border: 2px solid cm_primary_blue;
+    box-sizing: border-box;
+}
+
+@media mobile {
+    .leftArrowButton, .rightArrowButton, .filterButton, .filterButtonWrapper {
+        display: none!important;
+    }
+
+    .filtersList{
+        margin-right: 0;
+    }
+}

package/lib/molecule/quick-filters/types.d.ts

@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types';
+import { ButtonLinkProps } from '../../atom/button-link/types';
+export declare type QuickFiltersProps = {
+    primaryOption: {
+        defaultLabel: string;
+        defaultValue: string;
+        defaultIconName: string;
+        defaultSelected: boolean;
+        onDefaultClick: () => void;
+        defaultAriaLabel: string;
+    };
+    nextFilterAriaLabel: string;
+    previousFilterAriaLabel: string;
+    filterOptionsAriaLabel: string;
+    filterOptions: FilterOption[];
+    filterButton?: ButtonLinkProps;
+};
+export declare type ScrollByOptions = {
+    left: number;
+    behavior: string;
+};
+declare type FilterOption = {
+    iconName: string;
+    label: string;
+    value: string;
+    onClick: () => void;
+    selected: boolean;
+    ariaLabel: string;
+};
+export declare const propTypes: {
+    primaryOption: PropTypes.Requireable<PropTypes.InferProps<{
+        defaultLabel: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        defaultIconName: PropTypes.Requireable<string>;
+        defaultSelected: PropTypes.Requireable<boolean>;
+        defaultAriaLabel: PropTypes.Requireable<string>;
+        onDefaultClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }>>;
+    nextFilterAriaLabel: PropTypes.Requireable<string>;
+    previousFilterAriaLabel: PropTypes.Requireable<string>;
+    filterOptionsAriaLabel: PropTypes.Requireable<string>;
+    filterOptions: PropTypes.Requireable<(PropTypes.InferProps<{
+        iconName: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        selected: PropTypes.Requireable<boolean>;
+        ariaLabel: PropTypes.Requireable<string>;
+    }> | null | undefined)[]>;
+    filterButton: PropTypes.Requireable<PropTypes.InferProps<{
+        type: PropTypes.Requireable<string>;
+        usage: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'aria-label': PropTypes.Requireable<string>;
+        tooltipText: PropTypes.Requireable<string>;
+        tooltipPlacement: PropTypes.Requireable<string>;
+        'data-name': PropTypes.Requireable<string>;
+        'data-testid': PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<{
+            position: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            faIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                color: PropTypes.Requireable<string>;
+                backgroundColor: PropTypes.Requireable<string>;
+                size: PropTypes.Requireable<number>;
+                customStyle: PropTypes.Requireable<{
+                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+                }>;
+            }>>;
+        }>>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        link: PropTypes.Requireable<PropTypes.InferProps<{
+            href: PropTypes.Requireable<string>;
+            download: PropTypes.Requireable<boolean>;
+            target: PropTypes.Requireable<string>;
+        }>>;
+        hoverBackgroundColor: PropTypes.Requireable<string>;
+        hoverColor: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        customStyle: PropTypes.Requireable<{
+            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+        }>;
+        useTitle: PropTypes.Requireable<boolean>;
+        customLabelClassName: PropTypes.Requireable<string>;
+    }>>;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/molecule/quick-filters/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAG7D,oBAAY,iBAAiB,GAAG;IAC9B,aAAa,EAAE;QACb,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,OAAO,CAAC;QACzB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,mBAAmB,EAAE,MAAM,CAAC;IAC5B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBrB,CAAC"}

package/lib/molecule/quick-filters/types.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.propTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const propTypes = exports.propTypes = {
+  primaryOption: _propTypes.default.shape({
+    defaultLabel: _propTypes.default.string,
+    defaultValue: _propTypes.default.string,
+    defaultIconName: _propTypes.default.string,
+    defaultSelected: _propTypes.default.bool,
+    defaultAriaLabel: _propTypes.default.string,
+    onDefaultClick: _propTypes.default.func
+  }),
+  nextFilterAriaLabel: _propTypes.default.string,
+  previousFilterAriaLabel: _propTypes.default.string,
+  filterOptionsAriaLabel: _propTypes.default.string,
+  filterOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    iconName: _propTypes.default.string,
+    label: _propTypes.default.string,
+    value: _propTypes.default.string,
+    onClick: _propTypes.default.func,
+    selected: _propTypes.default.bool,
+    ariaLabel: _propTypes.default.string
+  })),
+  filterButton: _propTypes.default.shape(_buttonLink.default.propTypes)
+};
+//# sourceMappingURL=types.js.map

package/lib/molecule/quick-filters/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["_propTypes","_interopRequireDefault","require","_buttonLink","e","__esModule","default","propTypes","exports","primaryOption","PropTypes","shape","defaultLabel","string","defaultValue","defaultIconName","defaultSelected","bool","defaultAriaLabel","onDefaultClick","func","nextFilterAriaLabel","previousFilterAriaLabel","filterOptionsAriaLabel","filterOptions","arrayOf","iconName","label","value","onClick","selected","ariaLabel","filterButton","ButtonLink"],"sources":["../../../src/molecule/quick-filters/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport ButtonLink from '../../atom/button-link';\n\nexport type QuickFiltersProps = {\n  primaryOption: {\n    defaultLabel: string;\n    defaultValue: string;\n    defaultIconName: string;\n    defaultSelected: boolean;\n    onDefaultClick: () => void;\n    defaultAriaLabel: string;\n  };\n  nextFilterAriaLabel: string;\n  previousFilterAriaLabel: string;\n  filterOptionsAriaLabel: string;\n  filterOptions: FilterOption[];\n  filterButton?: ButtonLinkProps;\n};\n\nexport type ScrollByOptions = {\n  left: number;\n  behavior: string;\n};\n\ntype FilterOption = {\n  iconName: string;\n  label: string;\n  value: string;\n  onClick: () => void;\n  selected: boolean;\n  ariaLabel: string;\n};\n\nexport const propTypes = {\n  primaryOption: PropTypes.shape({\n    defaultLabel: PropTypes.string,\n    defaultValue: PropTypes.string,\n    defaultIconName: PropTypes.string,\n    defaultSelected: PropTypes.bool,\n    defaultAriaLabel: PropTypes.string,\n    onDefaultClick: PropTypes.func\n  }),\n  nextFilterAriaLabel: PropTypes.string,\n  previousFilterAriaLabel: PropTypes.string,\n  filterOptionsAriaLabel: PropTypes.string,\n  filterOptions: PropTypes.arrayOf(\n    PropTypes.shape({\n      iconName: PropTypes.string,\n      label: PropTypes.string,\n      value: PropTypes.string,\n      onClick: PropTypes.func,\n      selected: PropTypes.bool,\n      ariaLabel: PropTypes.string\n    })\n  ),\n  filterButton: PropTypes.shape(ButtonLink.propTypes)\n};\n"],"mappings":";;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAgCzC,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG;EACvBE,aAAa,EAAEC,kBAAS,CAACC,KAAK,CAAC;IAC7BC,YAAY,EAAEF,kBAAS,CAACG,MAAM;IAC9BC,YAAY,EAAEJ,kBAAS,CAACG,MAAM;IAC9BE,eAAe,EAAEL,kBAAS,CAACG,MAAM;IACjCG,eAAe,EAAEN,kBAAS,CAACO,IAAI;IAC/BC,gBAAgB,EAAER,kBAAS,CAACG,MAAM;IAClCM,cAAc,EAAET,kBAAS,CAACU;EAC5B,CAAC,CAAC;EACFC,mBAAmB,EAAEX,kBAAS,CAACG,MAAM;EACrCS,uBAAuB,EAAEZ,kBAAS,CAACG,MAAM;EACzCU,sBAAsB,EAAEb,kBAAS,CAACG,MAAM;EACxCW,aAAa,EAAEd,kBAAS,CAACe,OAAO,CAC9Bf,kBAAS,CAACC,KAAK,CAAC;IACde,QAAQ,EAAEhB,kBAAS,CAACG,MAAM;IAC1Bc,KAAK,EAAEjB,kBAAS,CAACG,MAAM;IACvBe,KAAK,EAAElB,kBAAS,CAACG,MAAM;IACvBgB,OAAO,EAAEnB,kBAAS,CAACU,IAAI;IACvBU,QAAQ,EAAEpB,kBAAS,CAACO,IAAI;IACxBc,SAAS,EAAErB,kBAAS,CAACG;EACvB,CAAC,CACH,CAAC;EACDmB,YAAY,EAAEtB,kBAAS,CAACC,KAAK,CAACsB,mBAAU,CAAC1B,SAAS;AACpD,CAAC","ignoreList":[]}

package/locales/lt/global.json

@@ -79,7 +79,7 @@
   "learning_priorities_description": "Jūsų svarbiausios mokymosi prioritetų sritys, nustatytos Jūsų įmonės",
   "learning_priorities_brand_description": "Apibrėžkite savo įmonės mokymosi prioritetus pasirinkdami įgūdžius, grojaraščius arba sertifikatus. Jie bus rodomi puslapyje „Mano mokymasis“.",
   "media_stars_to_win_plural": "Pirmą kartą peržiūrėję pamoką, laimėkite {{count}} papildomas (-a) žvaigždutes (-ę) šiame skyriuje !",
-  "media_stars_to_win": "Pirmą kartą peržiūrėję pamoką, laimėkite {{count}} papildomą žvaigždutę šiame skyriuje!",
+  "media_stars_to_win": "Pirmą kartą peržiūrėję pamoką, laimėkite {{count}} papildomas (-a) žvaigždutes (-ę) šiame skyriuje!",
   "modules": "{{count}} modulis",
   "modules_plural": "{{count}} moduliai",
   "modules_completed_mandatory": "<span data-name=\"progress-stats\" style=\"color=#515161;padding-right: 4px;\">{{count}}/{{total}}</span> privalomas modulis užbaigtas",
@@ -163,7 +163,7 @@
   "zuora_discount_code": "Nuolaidos kodas",
   "mandatory_fields": "*Privalomi laukai",
   "something_went_wrong": "Oi! Kažkas nutiko ne taip.",
-  "review_mode_tooltip_header": "Kas yra Kartojimo režimas?",
+  "review_mode_tooltip_header": "Kas yra Kartojimosi režimas?",
   "review_mode_tooltip_content": "Informacija pranyksta iš atminties vos tik į ją išmokstate? Tai visiškai normalu: be kartojimo nėra ir įsiminimo! Kad žinios išliktų ilgam, naudokite Kartojimo režimą ir atgaivinkite atmintį!",
   "review_mode_tooltip_content_part1": "Pasirinkite 1 įgūdį",
   "review_mode_tooltip_content_part2": "Atsakykite į 5 klausimus",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.40.0",
+  "version": "11.40.1-alpha.11+a11406e14",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -166,5 +166,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "663355a6d884caf861b9bf95f62a49790c55df92"
+  "gitHead": "a11406e143b36bb0c63acc794d9eb764eae5d3de"
 }