open-index/open-npm huggingface dataset:
npm package: @myuw-web-components/myuw-app-styles
Description: This HTML import contains custom CSS properties that are consumed by other components in the myuw-web-components space.
Latest version: 1.3.5

# MyUW App Styles

This HTML import contains custom CSS properties that are consumed by other components in the myuw-web-components space.

## How to use

To use the "UW-Madison White" theme, for example, import the component and add the "uw-madison-white-theme" class to your page's body element, like so:

```html
<!-- import the module -->
<script type="module" src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-app-styles@latest/myuw-app-styles.min.mjs"></script>

<!-- fallback for browsers without ES2015 module support -->
<script nomodule src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-app-styles@latest/myuw-app-styles.min.js"></script>

<body class="uw-madison-white-theme">
    <!-- ... -->
</body>
```

To avoid flashing unstyled text, this component also uses [FontFaceObserver](https://github.com/bramstein/fontfaceobserver) to determine when UW-Madison theme fonts are loaded and updates `<body>` with the attribute `myuw-font-loaded`

_Note:_ The evergreen "latest" version can be used for convenience, but in production settings it is recommended to use the latest [release version](https://github.com/myuw-web-components/myuw-app-styles/releases) specifically, and upgrade only after testing!

## Theming

The default theme is based on UW-Madison red and other colors from the [UW-Madison brand guidelines](https://brand.wisc.edu/web/colors/) for web. You don't have to do anything special to use this theme.

Cross-browser testing provided by:<br/>
<a href="https://www.browserstack.com/"><img width="160" src="https://myuw-web-components.github.io/img/Browserstack-logo.svg" alt="BrowserStack"/></a>
npm package: @myuw-web-components/myuw-badge
Description: ![Screenshot showing 'Find it in MyUW' badge in each of the themes. A Madison-red theme including the Madison crest. A black theme with only the bare 'Find it in MyUW' text](badges.png "Badge themes")
Latest version: 1.1.0

# myuw-badge

![Screenshot showing 'Find it in MyUW' badge in each of the themes. A Madison-red theme including the Madison crest. A black theme with only the bare 'Find it in MyUW' text](badges.png "Badge themes")

A badge with two available themes to help users discover new widgets and content in MyUW.

## Getting Started

Include the component in your page:

```html
<!-- import the module -->
<script type="module" src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-badge@latest/myuw-badge.min.mjs"></script>

<!-- fallback for browsers without ES2015 module support -->
<script nomodule scr="https://cdn.my.wisc.edu/@myuw-web-components/myuw-badge@latest/myuw-badge.min.js"></script>

<myuw-badge
  url=""
  dark-theme
  white-border
>
</myuw-badge>
```

_Note:_ The evergreen "latest" version can be used for convenience, but in production settings it is recommended to use the latest [release version](https://github.com/myuw-web-components/myuw-badge/releases) specifically, and upgrade only after testing!

### Configurable properties via attributes

- **url:** (Required) Set the URL the badge should link to (e.g. The detail page for a MyUW widget)
- **dark-theme:** If this attribute is present, the badge will use the black theme (red by default). The red theme is specific to UW-Madison; the black theme is appropriate for both UW-Madison and other MyUW contexts (e.g. my.wisconsin or my.uwrf)
- **white-border:** If this attribute is present, the badge will have a white border (e.g. when using the badge on a dark background)

## Development and contribution

To run the demo app locally and test the component, run the following commands:

```bash
$ npm install
$ npm start
```
npm package: @myuw-web-components/myuw-basic-card
Description: A basic card for MyUW
Latest version: 1.0.0

# MyUW Basic Card
This is a basic card web component used with MyUW.

![Screenshot showing an example of a basic card](basic-card.png "Basic Card")

# Using

Add the following to your page's `<head>`:
```html
<script src="https://unpkg.com/@myuw-web-components/myuw-basic-card@^1"></script>
```

Using the component 
```javascript
  <myuw-basic-card
    title="My Account"
    uid="unique-identifier"
    url="/star"
    md-icon="account_circle"
    button-text="Launch"
  >
  </myuw-compact-card>
```

## Configurable properties
`title`: The title of the web component.

`uid`: The unique ID of the card.

`md-icon`: Material UI icon name.

`fa-icon`: Font Awesome icon name.

`svg-icon`: A relative SVG icon URL.

`url`: The URL to open when the card is clicked. If the URL starts with `http` or `https`
the link will open in a new tab. If it is relative it will open in the same tab.

`button-text`: The text to show in the launch button.

## Removing Card

When the remove card button is clicked a `deleteCardNotify` event is fired where `event.detail`
as the UID of the card.

```javascript
  const el = document.getElementById('my-card');
  el.addEventListener('deleteCardNotify', event => {
    console.log(event.detail);
  });
```

# Local Development

Install dependencies with `npm install`

Run local server with `npm run serve:element`

# Building

Build the element into a single JavaScript file with `npm run build-element`. A single file
will be generated in `element/element.js`. This build path can be changed in `build-elements.js`
npm package: @myuw-web-components/myuw-drawer
Description: A slide out navigation drawer for use with the MyUW App Bar
Latest version: 1.2.1

# `<myuw-drawer> and <myuw-drawer-link>`

A three-part slide out navigation drawer for use with the MyUW App Bar. Includes drawer, links, and optional subheaders with dividers.

## Usage

Add the following imports to your page:

```html
<!-- import the module -->
<script type="module" src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-drawer@latest/myuw-drawer.min.mjs"></script>

<!-- fallback for browsers without ES2015 module support -->
<script nomodule src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-drawer@latest/myuw-drawer.min.js"></script>

<myuw-drawer>
  <myuw-drawer-link
    slot="myuw-drawer-links"
    name="MyUW home"
    icon="mail"
    href="http://google.com"
  ></myuw-drawer-link>
  <myuw-drawer-subheader
    slot="myuw-drawer-links"
    name="Subheader"
    divider
  ></myuw-drawer-subheader>
  <myuw-drawer-link
    slot="myuw-drawer-links"
    name="Browse apps"
    icon="explore"
    href="http://google.com"
  ></myuw-drawer-link>
</myuw-drawer>
```

_Note:_ The evergreen "latest" version can be used for convenience, but in production settings it is recommended to use the latest [release version](https://github.com/myuw-web-components/myuw-drawer/releases) specifically, and upgrade only after testing!

### Configuration / child components for the drawer

Use the named `<slot>` tags to include child components of the myuw-drawer:

**Available slots:**
- **myuw-drawer-links**: Insert the `<myuw-drawer-link>` or `<myuw-drawer-subheader>` component

### Drawer link configurable attributes

- **name:** Set the text of the link component
- **icon:** The name of a Material icon to appear next to the link
- **href:** The the URL of the link

### Subheader configurable attributes

- **name:** Set the text of the subheader
- **divider:** Display a dividing line above the subheader (will display if attribute is present, no value required)


## Development and contribution

To run the demo app locally and test the component, run the following commands:

```bash
$ npm install
$ npm start
```

Cross-browser testing provided by:<br/>
<a href="https://www.browserstack.com/"><img width="160" src="https://myuw-web-components.github.io/img/Browserstack-logo.svg" alt="BrowserStack"/></a>
npm package: @myuw-web-components/myuw-help-and-feedback
Description: This component provides a way to present help/feedback resources and information in a dialog so users can get help quickly, without leaving the page.
Latest version: 1.1.0
Deprecated: this has been replaced by @myuw-web-components/myuw-help

# myuw-help

This component provides a way to present help/feedback resources and information in a dialog so users can get help quickly, without leaving the page.

## Development and contribution

To run the demo app locally and test the component, run the following commands:

```bash
$ npm install
$ npm start
```

## Usage

Add the following import to your page's `<head>`:

```html
<script type="module" src="https://unpkg.com/@myuw-web-components/myuw-help?module"></script>
<script nomodule src="https://unpkg.com/@myuw-web-components/myuw-help"></script>
```

Fire the `show-myuw-help` event on the `document.body` when you want the dialog to display (e.g. when your "help" button is clicked):

```js
function showHelpDialog() {
    var event = new Event('show-myuw-help');
    document.body.dispatchEvent(event);
}
```

*Note: It is important that you use that exact event name and dispatch the event from the document body. The component sets a listener on the body that listens for the* `show-myuw-help` *event.*

Use the component's HTML tag wherever you want:

```html
    <myuw-help
        myuw-help-title="Get help"
        show-default-content
        open>
        <div class="your-div-here" slot="myuw-help-content">
            Your custom content
        </div>
    </myuw-help
```

### Configurable properties via attributes

- **myuw-help-title**: The title to display at the top of the help dialog
- **show-default-content**: Include this attribute if you want to include the default UW-Madison-flavored help links.
- **open**: Only include this attribute if the dialog should be open by default

### Slots

- **myuw-help-content**: Use this slot to insert your own content into the dialog (with whatever markup and styling you want).
npm package: @myuw-web-components/myuw-search
Description: A material search field made for use with MyUW web components
Latest version: 1.5.9

# `<myuw-search>`

## Getting Started

Include the component as follows:

```html
<!-- import the module -->
<script type="module" src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-search@latest/myuw-search.min.mjs"></script>

<!-- fallback for browsers without ES2015 module support -->
<script nomodule src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-search@latest/myuw-search.min.js"></script>

<myuw-search
  slot="myuw-search"
  input-label="Search MyUW"
  button-label="Submit search"
  icon="search"
></myuw-search>
```

_Note:_ The evergreen "latest" version can be used for convenience, but in production settings it is recommended to use the latest [release version](https://github.com/myuw-web-components/myuw-search/releases) specifically, and upgrade only after testing!

Listen for the `myuw-search` CustomEvent and process the value how you like:

```js
/*
  1. Listen for myuw-search event
  2. Get the event data from event.detail.value
  3. Do what you want with the search term!
*/
document.body.addEventListener('myuw-search', (event) => {
  const valueFromSearchBar = event.detail.value // "detail" object is part of CustomEvent spec
  /*
    Perform search logic here. For example:
      - Pass the search value as a parameter to your app's search page
  */
}, false );
```

### Configurable properties via attributes

- **inputLabel (input-label)**: Text to use in the aria-label and placeholder of the search field
- **buttonLabel (button-label)**: Text to use for the aria-label of the search button
- **icon (icon)**: Text name of the material icon to use for the submit button ("search" by default)

### Custom CSS properties

- **--myuw-search-border**: Used to set the border color of the search component (to support themes with light background colors). Defaults to `none`.
- **--myuw-app-bar-color**: Used by to set the color of the search button icon on small screens. Defaults to white.

## Development and contribution

To run the demo app locally and test the component, run the following commands:

```bash
$ npm install
$ npm start
```

Cross-browser testing provided by:<br/>
<a href="https://www.browserstack.com/"><img width="160" src="https://myuw-web-components.github.io/img/Browserstack-logo.svg" alt="BrowserStack"/></a>