@nys-cui/cui-formpill 0.2.10 → 0.2.20

package/component-base/README.md

@@ -0,0 +1,43 @@
+## Creating a new component repository
+
+The top-level folder that should be checked into the git repository should be named after the component with the cui- prefix. For instance, for the widget component, the top-level folder should be cui-widget. Within that folder should be two folders: src for the code specific to the component, and a local copy of this spa base project.
+
+The top-level folder should also copy the files from the 'for-component' folder in this repository. The copied files should then be edited to replace any instance of [COMPONENT] with the name of the newly developed component. It is also suggested that a description is written in the package.json file. Once these files are copied, the for-component folder is no longer necessary and may be deleted.
+
+```
+[component directory]
+├── src
+├── component-base (this repo locally copied)
+│   ├── src
+│   │   ├── ... (details of src content not necessary)
+│   ├── cui.jsonc
+│   ├── package.json
+|   └── README.md
+├── .gitignore          )
+├── cui.jsonc           } moved from the deleted for-component folder
+└── package.json        )
+```
+
+## Creating a component
+
+It is recommended to use the following page of our documentation for assistance in creating a new component: https://tax-qa.tax.ny.gov/training/ui/CUI/guide/project-structure/component/
+
+## Building & registering the component
+
+Once the web component is ready to be tested in an spa environment, the command "npm run build" should be run on the top-level component directory in the terminal. This should create a 'dist' folder in the top-level component directory that contains another component.js file.
+
+Within this spa base project, the developer should then go from the 'src' folder to 'spa.js'. Within that file are two commented out lines to be used as templates to import the component.
+
+`import [COMPONENT] from '../../dist/js/[component].js';`
+`[COMPONENT]` should be replaced with the name of the component's class, `[component]` should be replaced with the same case as the filename in the dist folder.
+
+`customElements.define('[component]', [COMPONENT]);`
+`[component]` here should be replaced with how the developer intends the tag to be formatted when used in html, while `[COMPONENT]` should match `[COMPONENT]` from the previously documented line.
+
+## Running the base project
+
+Once that's done, open a terminal on this spa base project directory, run the command 'npm install' to get the latest version of our spa app class, then the command 'cui -d -w' to run the spa base project on http://localhost:4080. For more information on our CUI CLI, please read about installing it here https://tax-qa.tax.ny.gov/training/ui/CUI/guide/getting-started/cui-cli/ and details of runner parameters here https://tax-qa.tax.ny.gov/training/ui/CUI/guide/getting-started/working-with-coreui/
+
+The developer should not be able to add instances of their component to their index page (located in the spa base project's src -> screens -> index folder), which should be used for comprehensive testing of the component's features or link to additional pages created to test categories of features for larget components.
+
+For additional guidance by way of seeing this setup for a specific component, please refer to the cui-widget component project structure found here https://nyssc.svc.ny.gov/DTF/ui/cui2-components/cui-widget

package/component-base/cui.jsonc

@@ -0,0 +1,6 @@
+{
+    "name": "Component Testing Base",
+    "mode": "spa",
+    "src": "src",
+    "entry": "spa.js"
+}

package/component-base/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "component-test-base-widget",
+    "description": "Component Test Base - Widget",
+    "version": "0.0.1",
+    "dependencies": {
+        "@nys-cui/cui-asof": "latest",
+        "@nys-cui/cui-button": "latest",
+        "@nys-cui/cui-button-menu": "latest",
+        "@nys-cui/cui-dynamic-block": "latest",
+        "@nys-cui/cui-field": "latest",
+        "@nys-cui/cui-field-check-group": "latest",
+        "@nys-cui/cui-field-checkbox": "latest",
+        "@nys-cui/cui-field-file-upload": "latest",
+        "@nys-cui/cui-field-listbox": "latest",
+        "@nys-cui/cui-field-password": "latest",
+        "@nys-cui/cui-field-radio-group": "latest",
+        "@nys-cui/cui-field-select": "latest",
+        "@nys-cui/cui-field-text": "latest",
+        "@nys-cui/cui-field-text-date": "latest",
+        "@nys-cui/cui-field-textarea": "latest",
+        "@nys-cui/cui-form": "latest",
+        "@nys-cui/cui-formpill": "latest",
+        "@nys-cui/cui-help": "latest",
+        "@nys-cui/cui-hidden": "latest",
+        "@nys-cui/cui-icon": "latest",
+        "@nys-cui/cui-input-group": "latest",
+        "@nys-cui/cui-link": "latest",
+        "@nys-cui/cui-message": "latest",
+        "@nys-cui/cui-message-list": "latest",
+        "@nys-cui/cui-modal": "latest",
+        "@nys-cui/cui-notifier": "latest",
+        "@nys-cui/cui-popover": "latest",
+        "@nys-cui/cui-section": "latest",
+        "@nys-cui/cui-spa-app-class": "latest",
+        "@nys-cui/cui-spinner": "latest",
+        "@nys-cui/cui-table": "latest",
+        "@nys-cui/cui-tabs": "latest",
+        "@nys-cui/cui-toast": "latest",
+        "@nys-cui/cui-tree": "latest",
+        "@nys-cui/cui-widget": "latest"
+    }
+}

package/component-base/src/assets/scss/_button-menu.scss

@@ -0,0 +1,270 @@
+cui-button-menu {
+    display: flex;
+    cursor: pointer !important;
+
+    .accessible-hidden {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        padding: 0 !important;
+        margin: -1px !important;
+        overflow: hidden !important;
+        clip: rect(0, 0, 0, 0) !important;
+        white-space: nowrap !important;
+        border: 0 !important;
+        top: -1px;
+    }
+
+    button.button-menu-trigger {
+
+        position: relative;
+        background: #f6f3f4;
+        text-shadow: none;
+        font-size: 14px;
+        margin-top: 0;
+        border: 1px solid #a1a1a1;
+        border-radius: 5px;
+        color: #333;
+        cursor: pointer !important;
+        padding: 5px 15px;
+        display: flex;
+        align-items: center;
+        margin-left: 0 !important;
+
+        cui-icon {
+            svg {
+                width: 15px !important;
+                height: 15px !important;
+            }
+        }
+
+        .arrow-down {
+            width: 0px;
+            height: 0px;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid #A1A1A1;
+            margin-left: 10px;
+        }
+
+        .vertical {
+            height: 15px;
+            margin-left: 10px;
+            border-left: 1px solid #A1A1A1;
+        }
+
+    }
+}
+
+button-menu-popover:has(dialog) {
+    left: 0;
+    right: 0 !important;
+    top: 0 !important;
+    display: flex !important;
+
+    .dialog-popover-contents {
+        max-height: 90%;
+        width: 90%;
+        overflow: hidden;
+        z-index: 100;
+        border: 0;
+        border-radius: 5px;
+
+        header {
+            display: flex;
+            background: #fff;
+            border: 1;
+            border-radius: 32px;
+
+            span {
+                flex: 1;
+                border-radius: 32px;
+                color: #a1a1a1;
+                display: inline-flex;
+                font-size: 1.5em;
+                font-weight: 400;
+                height: 32px;
+                width: 32px;
+                justify-content: center;
+                flex-direction: column;
+
+                &:hover {
+                    background: #EFEFEF;
+                    color: #787878;
+                }
+            }
+
+            .dialog-close {
+                background-color: var(--cui-field-size-datapicker-btns-bcg-color);
+                border-color: var(--cui-field-size-datapicker-btns-brd-color);
+                width: var(--cui-field-size-nextprev-button-wdt);
+                height: var(--cui-field-size-nextprev-button-hgt);
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                order: 4;
+                margin-left: auto;
+                border: 0;
+            }
+
+            button {
+                flex: 0 1 50px;
+                position: relative;
+                font-size: 16px;
+            }
+        }
+
+        &::backdrop {
+            background: rgba(0, 0, 0, 0.5);
+        }
+
+        cui-button {
+            margin-left: 3px;
+            margin-right: 3px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 2px;
+            padding-bottom: 2px;
+            display: flex;
+
+            button {
+                text-align: left;
+                background: none;
+                border: none;
+                padding: 0;
+                margin: 0 !important;
+                padding: 5px 30px 5px 5px;
+                width: 100%;
+
+            }
+
+            &:hover {
+                background-color: #EBEBEB;
+            }
+        }
+
+        cui-link {
+            margin-left: 3px;
+            margin-right: 3px;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 2px;
+            padding-bottom: 2px;
+
+            display: flex;
+
+            a {
+                text-align: left;
+                margin: 0 !important;
+                padding: 5px 30px 5px 5px;
+                width: 100%;
+            }
+
+            &:hover {
+                background-color: #EBEBEB;
+            }
+        }
+
+
+
+        &.show {
+            display: block;
+        }
+
+        ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+
+            li {
+                border-bottom: 0.5px solid #EBEBEB;
+
+                &:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
+
+    }
+}
+
+button-menu-popover {
+    position: absolute;
+
+    &.button-menu {
+
+        position: absolute;
+        display: flex;
+
+        .popover-contents {
+            z-index: 20;
+            background-color: #FFF;
+            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+            width: auto;
+            // max-width: 85%;
+            border-radius: 2px;
+            flex-direction: column;
+            justify-content: center;
+            display: block;
+            margin-top: -5px;
+
+            cui-button {
+                margin-left: 3px;
+                margin-right: 3px;
+                padding-left: 5px;
+                padding-right: 5px;
+                padding-top: 2px;
+                padding-bottom: 2px;
+                border-bottom: 0.5px solid #EBEBEB;
+                display: flex;
+
+                button {
+                    text-align: left;
+                    background: none;
+                    border: none;
+                    padding: 0;
+                    margin: 0 !important;
+                    padding: 10px 30px 10px 5px;
+                    width: 95%;
+                }
+
+                &:hover {
+                    background-color: #EBEBEB;
+                }
+            }
+
+            cui-link {
+                margin-left: 3px;
+                margin-right: 3px;
+                padding-left: 5px;
+                padding-right: 5px;
+                padding-top: 2px;
+                padding-bottom: 2px;
+                border-bottom: 0.5px solid #EBEBEB;
+                display: flex;
+
+                a {
+                    text-align: left;
+                    margin: 0 !important;
+                    padding: 10px 30px 10px 5px;
+                    width: 95%;
+                }
+
+                &:hover {
+                    background-color: #EBEBEB;
+                }
+            }
+
+            &.show {
+                display: block;
+            }
+
+            ul {
+                list-style-type: none;
+                padding: 0;
+                margin: 0;
+            }
+
+        }
+    }
+}

package/component-base/src/assets/scss/_buttons.scss

@@ -0,0 +1,200 @@
+@use '_variables.scss';
+
+button {
+    background: variables.$secondaryButtonBackground;
+    border: 1px solid variables.$secondaryButtonBorderColor;
+    border-radius: 5px;
+    color: variables.$secondaryButtonTextColor;
+    cursor: pointer;
+    margin-bottom: 15px;
+    padding: 5px 15px;
+
+    &.primary {
+        background: variables.$primaryButtonBackground;
+        color: variables.$primaryButtonTextColor;
+    }
+
+    &.caret{
+
+        border-radius: 0;
+        border: 1px solid variables.$black;
+        padding: 2px 2px 0px 2px;
+        background: white;
+        cui-icon{
+
+            svg{
+                
+                width: 12px;
+                height: 12px;
+                
+            }
+
+            &.right{
+                svg{
+                    transform: rotate(-90deg);
+                }
+            }
+    
+            &.left{
+                svg{
+                transform: rotate(90deg);
+                }
+            }   
+        }
+    }
+
+    &.arrow{
+        background: rgba(0, 0, 0, 0);
+        border: 0;
+        margin-bottom:0;
+        cui-icon{
+
+            svg{
+                
+                width: 12px;
+                height: 12px;
+
+                path{
+                    fill: #a1a1a1;
+                }
+                
+            }   
+        }
+        &.next{
+
+            cui-icon{
+                svg{
+                    transform: scaleX(-1);
+                }
+            }
+        }
+        &.label-align{
+            margin-right: 4px;
+        }
+    }
+}
+
+cui-button::part(control) {
+    background: variables.$secondaryButtonBackground;
+    border: 1px solid variables.$secondaryButtonBorderColor;
+    border-radius: 5px;
+    color: variables.$secondaryButtonTextColor;
+    cursor: pointer;
+    margin-bottom: 15px;
+    padding: 5px 15px;
+}
+
+cui-button[primary] button {
+    background: variables.$primaryButtonBackground;
+    color: variables.$primaryButtonTextColor;
+}
+
+cui-button {
+    &+cui-button {
+        margin-left: 10px;
+    }
+}
+
+cui-button.table button {
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 6px;
+
+    cui-icon svg {
+        width: 18px;
+        height: 18px;
+    }
+
+}
+
+cui-button.table-fake-link button {
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0px;
+    color: #397dbb
+}
+
+
+rpso-toggle-button {
+
+    button {
+        border: 1px solid variables.$secondaryButtonBorderColor;
+        border-radius: 5px;
+        cursor: pointer;
+        margin: 0;
+        padding: 5px 15px;
+    }
+
+    &.primary {
+        button {
+            border: 1px solid variables.$secondaryButtonBorderColor;
+            border-radius: 5px;
+            cursor: pointer;
+            padding: 5px 15px;
+            background: variables.$primaryButtonBackground;
+            color: variables.$primaryButtonTextColor;
+        }
+    }
+
+    &.icon {
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        height: 30px;
+        padding-left: 15px;
+        padding-right: 15px;
+        padding-top: 3px;
+
+        button {
+            background: none;
+            border: none;
+            margin: 0;
+            padding: 0;
+
+            span.cui-hide-from-screen{
+                display: none;
+            }
+        }
+
+        cui-icon {
+
+            svg {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 830px) {
+    button {
+    
+        &.caret{
+    
+            cui-icon{
+    
+                svg{
+                    
+                    width: 12px;
+                    height: 12px;
+                    
+                }
+    
+                &.right{
+                    svg{
+                        transform: none;
+                    }
+                }
+        
+                &.left{
+                    svg{
+                    transform: rotate(180deg);
+                    }
+                }   
+            }
+        }
+    }
+}

package/component-base/src/assets/scss/_cui-asof.scss

@@ -0,0 +1,86 @@
+cui-section cui-asof::part(asof-wrapper) {
+    padding-bottom: 20px;
+}
+
+rpso-pageinfo + cui-asof::part(asof-wrapper) {
+    padding-top: 15px;
+}
+
+cui-asof {
+    &::part(asof-label) {
+        display: flex;
+        justify-content: center;
+        padding: 0px 10px;
+        color: var(--page-title-color);
+    }
+
+    cui-button {
+        margin: unset;
+
+        button {
+            background: transparent;
+            border: none;
+            padding: unset;
+            margin: unset;
+
+            cui-icon {
+                svg {
+                    height: 12px !important;
+                    width: 12px !important;
+                    fill: var(--page-title-icon-color);
+                }
+
+                &.flipped svg {
+                    transform: scaleX(-1);
+                }
+            }
+
+            &:hover cui-icon svg {
+                fill: var(--page-icon-hover-color);
+            }
+        }
+
+        &#first,
+        &[slot="first-button"] {
+            margin-right: 10px;
+        }
+
+        &#last,
+        &[slot="last-button"] {
+            margin-left: 10px;
+        }
+    }
+}
+
+@media screen and (max-width: 830px) {
+    cui-asof {
+        &::part(asof-wrapper) {
+            width: fit-content;
+            flex-wrap: wrap;
+            justify-content: space-around;
+        }
+
+        &::part(asof-label) {
+            width: 100%;
+            order: 1;
+            margin-bottom: 10px;
+            flex-basis: unset;
+        }
+
+        [slot="first-button"] {
+            order: 2;
+        }
+
+        [slot="prev-button"] {
+            order: 3;
+        }
+
+        [slot="next-button"] {
+            order: 4;
+        }
+
+        [slot="last-button"] {
+            order: 5;
+        }
+    }
+}