nysoh-web-components v0.0.49

Change Log

0.0.49

1. Fixed Dashboard Url for Proxy user and Indvidual user In Desktop View.

0.0.48

1. Added .lightblue class for td's.
2. Removed bottom margin on last paragraph in accordions.
3. Updated buttons: now host passes buttonid to as it's ID.
4. Added 'buttontype', 'buttonsize' and 'buttonstyle' to the IGNORE_ATTRS so they aren't passed to the button from the host.
5. dropdown-item and nav-item components are updated to allow for linkClicked events in addition to the existing link/href prop.
6. Added nysoh-rating-input component for star rating filter.

0.0.47

1. Removed type="button" at the component level.
2. Finalized nysoh-offcanvas component.
3. Updated header using nysoh-offcanvas and nysoh-accordion for mobile menu.
4. Nysoh-header component has separate props for individual-dashboard-url and proxy-dashboard-url.
5. Fixes for nysoh-header and contentstack utlity to pull in the correct entry.

0.0.46

1. Fix for mobile header where the offcanvas was showing for desktop.
2. Removed type="button" at the component level
3. Built nysoh-offcanvas component
4. Updated header using nysoh-offcanvas# Change Log

0.0.45

1. Added type="button" at the component level to correct the error when added to
2. Initial version of offcanvas component and WIP mobile header.
3. Added "!important" on the font size of the H2 inside accordions to force it 1rem.

0.0.44

1. Nysoh-header now accepts several new props for proxy user display.
2. Nysoh-header acc-holder-name prop is split up into multiple props for display flexibility.

0.0.43

1. Removed border and background from modal close button
2. Removed type=button entry in button.scss from previous release - breaks full width buttons on mobile

0.0.42

1. Added type=button entry in button.scss to overwrite bootstrap so buttons will be full width when type="button" is added to nysoh-button
2. Pulled accordion h2 out of "details" in scss so any h2 in the title will look correct (1rem / bold)
3. Updated h2 to 1.5rem
4. Breadcrumb component updated for mobile display. Now includes a "mobile-completed" slot.

0.0.41

1. Package issue fixed

0.0.40

1. Updated footer to remove "chat" section
2. Added   next to the in the nysoh-required file to prevent the from breaking to a new line alone.
3. Added 'text-wrap:nowrap' to floating button / was breaking to two lines

0.0.39

1. Button group component added with option for toggle
2. Button toggle component added for use with button-group
3. Button now has prop to become a dropdown combined with slot=menu and the dropdown-item component.
4. Candidate fix for fixing the default date of today in desktop Safari
5. Added "!important" to error-message class to overwrite bootstrap

0.0.38

1. Updated disabled colors in the select.scss file
2. Fixed floating button / will stick to the bottom of when scrolled past
3. Updated dropdown-buttons with a slot to allow onClick, etc
4. Updated / Fixed footer

0.0.37

1. Added .lightblue class for 's in the Plan tables
2. Updated alert text color to primary font color (black)
3. Added badges for cards (info, success, warning, danger)

0.0.36

1. Updated .error-message class to overwrite bootstrap color

0.0.35

1. Range/slider input styled to match design system
2. Updated table styles for compare plans accordions
3. Star ratings styled and updated to accept 1/2 star values
4. Disabled links and buttons get pointer-events: none to prevent actions
5. Tooltips get role="tooltip" for 508 compliance.

0.0.34

1. Republish since v0.0.33 package was broken.

0.0.33

1. Added theme prop for accordions to add "table-accordion" for accordions to go inside tables.

0.0.32

1. Tweaks to accordions for better spacing/max-height
2. Fix for dropdown JS

0.0.31

1. Added new prop(displayRequired) in from-wrapper to display required message at the bottom, only when required.And exisitng locale prop accepts either 'en' |'es'

0.0.31

1. Added new prop(displayRequired) in from-wrapper to display required message at the bottom, only when required. And exisitng locale prop accepts either 'en' |'es'

0.0.30

1. Removed padding from nysoh-form-wrapper
2. Added margin on top of paragraphs in page title
3. Updated select disabled colors
4. Tables styled to match design system and classes added for variations
5. Fix close button color in modals
6. Accordions refactored to remove JS dependency and fix ongoing issues

0.0.29

1. Reverted accordion fix while we find solution for Angular
2. Added "!important" to hover color on secondary danger button
3. Metal level badge styles added to nysoh-badge types
4. nysoh-card-banner component added and supports background color
5. nysoh-card accepts background prop for colors
6. nysoh-card-footer component added and supports background color
7. nysoh-range component added, pending style updates to match design system
8. Added disabled class for anchor tags
9. nysoh-header - removed hidden right side of util nav for Spanish mobile testing workaround
10. Invalid input styles updated to target on ng-touched in addition to ng-invalid.

0.0.28

1. Added disabled class and attribute styles for select and input
2. Updated hover color on secondary success button
3. nysoh-spinner added for loading indication
4. Fixed error icon location for date pickers with "ng-invalid" class
5. Added error styling for class "error-message" & "ng-invalid"
6. Removed footer slot from card (not being used) to fix space issue
7. Removed heading prop from card (not being used)

0.0.27

1. Candidate fix to align datepicker text left on Webkit/Safari.
2. Updated input error styles to fix
3. Added danger style for Tertiary buttons (Remove button)
4. Added "float:none;" to - this fixes the first radio/checkbox alignment issue

0.0.26

1. Fix for accordion collapse issue
2. Updated header styles and fixed hamburger icon
3. Removed default color from paragraph
4. Added Bootstrap text color overwrite (text-primary, text-danger, text-success, etc)
5. form-wrapper accepts locale prop to show english or spanish "* = required field"
6. data-summary refactored to use span instead of nysoh-label
7. data-summary allows for html tags to be used in the summary-value prop
8. data-summary: fixed issues with summary-type='danger'

0.0.25

1. Removing text transform capitalize from H2, H3, H4
2. Button styles: applied !important to overwrite bootstrap css
3. Removed margin on last paragraph in tooltips
4. Removed margin on last paragraph in alerts
5. Added margin-bottom to input group to match other inputs
6. Updated tertiary buttons to have dark blue text
7. Updated Modal X button to blue
8. Removed modal top and bottom borders
9. Updated page title top and bottom margins - used prop instead of html for title / added margin on h1 only when followed by
10. Updated info alert icon and heading to match figma colors
11. Updated header slot of card - checks for prop before adding card-header
12. Added icon spacing for icons inside label

0.0.24

1. Remove background color for inputs suspected to be negatively impacting disabled inputs on iPhone

0.0.23

1. MM/DD/YYYY placeholder now capitalized in datepickers
2. Minor header changes to support Spanish mode
3. Desktop version of breadcrumbs mostly styled to match design system

0.0.22

1. Breadcrumb components are available but not yet styled. See index.html for example usage.
2. Tooltip styling fixes
3. Remove aria-required from asterisk (failed 508)
4. Button styles more closely match design system.
5. Success and Danger styles fully styled for Primary and Secondary buttons. Use buttonstyle="success/danger/link".
6. Alert style fixes
7. Card now has theme="donate-life" for the Donate Life/Organ Donor use case
8. Performance issue related to nysoh-icon fixed. Bundle size reduced by half
9. Alerts with danger style receive role="alert" for 508 compliance
10. Color of labels for summary component fixed
11. More examples added in index.html file

Stencil Component Starter

This is a starter project for building a standalone Web Component using Stencil.

Stencil is also great for building entire apps. For that, use the stencil-app-starter instead.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.

Using this component

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

Script tag

• Put a script tag similar to this <script type='module' src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script type='module' src='node_modules/my-component/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install my-component --save
• Add an import to the npm packages import my-component;
• Then you can use the element anywhere in your template, JSX, html etc

Quick Tip

• May need to delete excess CSS files created by stencil. Only file should be inside src/assets/nysoh-styles.css
• npm run build
• npm cache clean --force
• npm run storybook
• npx npkill
• build from components folder which is nysoh/nysoh-components/packages/nysoh-web-components
• Remember to add document files for documentation
• you may need to delete node modules folder, packages lock json and dist folder or run npx npkill if you get stuck building