@daffodil/design 0.63.1 → 0.64.0

package/src/molecules/image-gallery/README.md

@@ -1,31 +0,0 @@
-# Daff Image Gallery Component
-The Image Gallery component is deprecated.
-
-The daff image gallery component wraps img elements to display them in a gallery. It takes a list of imgs and an active image, and the selected image is controlled by the user. The position of the list of images changes depending on screen size.
-
-Images need to be wrapped in daff-gallery-image components, so the images can be properly wrapped and sized. The active image should be the same as the selected image, and it needs to have the attribute `daff-active-image`.
-
-## Daff Gallery Image Inputs
-
-### select
-
-```
-- boolean added for the selected image
-```
-
-## Usage
-
-```
-<daff-image-gallery>
-  <img daff-active-image src="{{selectedImage.url}}">
-  <daff-gallery-image 
-    *ngFor="let image of images"
-    [selected]="image.url === selectedImage">
-
-    <img alt="{{image.label}}"
-      src="{{image.url}}" 
-      (click)="selectedImage = image">
-
-  </daff-gallery-image>
-</daff-image-gallery>
-```

package/src/molecules/image-list/README.md

@@ -1,14 +0,0 @@
-# Daff Image List Component
-
-The daff image list component wraps elements (usually imgs) to display them in a list. The position of the list of images is vertical when the screen size is larger than 1024px, and is horizontal when the smaller.
-
-## Usage
-
-```
-<daff-image-list>
-  <img alt="label" src="url">
-  <img alt="label" src="url">
-  <img alt="label" src="url">
-  <img alt="label" src="url">
-</daff-image-list>
-```

package/src/molecules/link-set/README.md

@@ -1,44 +0,0 @@
-# Link Set
-`<daff-link-set>` is a component for displaying two or more `[daff-link-set-item]`s. `<daff-link-set>`s can be nested.
-
-## Supported Content Types
-A `<daff-link-set>` transcludes:
-* `[daffLinkSetHeading]`
-* `[daffLinkSetSubheading]`
-* `[daff-link-set-item]` component
-
-### Heading
-A link set heading is used by adding `[daffLinkSetHeading]` to any tag. This is used to define the heading of a top level link set.
-
-### Subheading
-A link set subheading is used by adding `[daffLinkSetSubheading]` to any tag. This is helpful to define the heading of a nested link set that is not actionable.
-
-### Styling links within a link set
-Use the `[daff-link-set-item]` component to style links within a link set.
-
-### Usage
-```
-<h4>Default Link Set</h4>
-<daff-link-set class="docs-link-set">
-  <a href="#" daff-link-set-item daffLinkSetHeading>Link Set Heading</a>
-  <a href="#" daff-link-set-item>Link</a>
-  <a href="#" daff-link-set-item>Link</a>
-  <a href="#" daff-link-set-item>Link</a>
-</daff-link-set>
-
-<h4>Nested Link Set</h4>
-<daff-link-set>
-  <a href="#" daff-link-set-item daffLinkSetHeading>Link Set Heading</a>
-  <a href="#" daff-link-set-item>Link</a>
-  <div daffLinkSetSubheading>Link Set Subheading</div>
-  <daff-link-set>
-    <a href="#" daff-link-set-item>Link</a>
-    <a href="#" daff-link-set-item>Link</a>
-    <a href="#" daff-link-set-item>Link</a>
-    <a href="#" daff-link-set-item>Link</a>
-  </daff-link-set>
-  <a href="#" daff-link-set-item>Link</a>
-  <a href="#" daff-link-set-item>Link</a>
-  <a href="#" daff-link-set-item>Link</a>
-</daff-link-set>
-```

package/src/molecules/list/README.md

@@ -1,69 +0,0 @@
-# List Component
-
-The `<daff-list>` component can be used to display a series of line items.
-
-## Basic List
-
-- Consists of multiple `<daff-list-item>`s
-
-### Usage
-
-```
-<daff-list>
-  <h3 daffListSubheader>Lorem Ipsum</h3>
-  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
-  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
-  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
-</daff-list>
-```
-
-## Link List (Deprecated)
-
-- `type="link"` is used for navigation lists
-
-### Usage
-
-```
-<daff-list type="link">
-  <h3 daffListSubheader>List Subheader</h3>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-</daff-list>
-```
-
-## Multi-line List (Deprecated)
-
-- `type="multi-line"` allows you to have multiple lines per `daff-list-item`.
-
-### Usage
-
-```
-<daff-list type="multi-line">
-  <daff-list-item>
-    <h4>Lorem ipsum</h4>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
-  </daff-list-item>
-  <daff-list-item>
-    <h4>Lorem ipsum</h4>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
-  </daff-list-item>
-  <daff-list-item>
-    <h4>Lorem ipsum</h4>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
-  </daff-list-item>
-</daff-list>
-```
-
-### Usage
-
-```
-<daff-list>
-  <daff-list-item>
-    <i class="fab fa-twitter" daffListItemIcon></i>
-    <h4>Lorem ipsum</h4>
-  </daff-list-item>
-</daff-list>
-```

package/src/molecules/media-gallery/README.md

@@ -1,19 +0,0 @@
-# Media Gallery
-`<daff-media-gallery>` is used to display a group of `[daffThumbnail]`s in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
-
-## Thumbnail
-`[daffThumbnail]` should be used as a directive with `<daff-image>`. [View Image Documentation](/libs/design/src/atoms/image/README.md)
-
-It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image by utilizing the `<daff-media-renderer>` component. The selected thumbnail can be controlled by the enduser, and the position of the list of thumbnails is dependent on the screen size.
-
-<design-land-example-viewer-container example="basic-media-gallery"></design-land-example-viewer-container>
-
-## Image Aspect Ratio
-It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as show in the example.
-
-The thumbnail dimension is set to `80x80` pixels, so the recommended aspect ratio is `1:1`. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.
-
-<design-land-example-viewer-container example="mismatched-sizes-media-gallery"></design-land-example-viewer-container>
-
-## Accessibility
-Accessibility considerations for media gallery is handled by the `DaffImageComponent`. The `alt` attribute must be defined in `<daff-image>`. It specifies an alternate text for an image. An error will appear if it's not defined. This is important because it allows screen readers to describe what's in the image for visually impaired people. [View Image Documentation](/libs/design/src/atoms/image/README.md)

package/src/molecules/menu/README.md

@@ -1,7 +0,0 @@
-# Menu
-Menus are small floating panels used to add additional information without cluttering a page.
-
-## Usage
-
-### Basic Menu
-<design-land-example-viewer-container example="basic-menu"></design-land-example-viewer-container>

package/src/molecules/modal/README.md

@@ -1,47 +0,0 @@
-# Modal Component
-
-The `DaffModalComponent` is a dynamically rendered component that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
-
-## Usage
-
-`DaffModalComponent` relies on using the `entryComponents` of the particular Angular `@NgModule`. To use the features of the `DaffModalComponent`:
-
-* Import the `DaffModalModule` as you would with any other `@daffodil/design` component
-* Add the component that you want rendered inside the modal to your `@NgModule`'s `entryComponents`
-
-```ts
-my.module.ts
-
-@NgModule({
-  declarations: [
-    MyModalContentComponent,
-  ],
-  imports: [
-    DaffModalModule,
-  ],
-  entryComponents: [
-    MyModalContentComponent
-  ]
-})
-export class ModalModule { 
-}
-```
-
-Once your `@NgModule` has been configured, you can take advantage of the `DaffModalService` that is provided by the `DaffModalModule` to `open` and `close` the instance of the `DaffModalComponent`. 
-
-```ts
-my-other.component.ts
-
-@Component({
-  template: '<button (click)="showModal()"></button>'
-})
-export class MyOtherComponent {
-  constructor(private modalService: DaffModalService) {}
-
-  showModal() {
-    this.modalService.open(MyModalContentComponent);
-  }
-}
-```
-
-> You will likely never render the `DaffModalComponent` directly like you would with other components due to its dynamic nature.

package/src/molecules/navbar/README.md

@@ -1,41 +0,0 @@
-# Navbar
-Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
-
-## Overview
-The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the `flex` display and is customizable with all the flexbox properties. It's required to be used with the native HTML `<nav>` element to ensure an accessible experience by default.
-
-## Basic Navbar
-<design-land-example-viewer-container example="basic-navbar"></design-land-example-viewer-container>
-
-## Theming
-The default background color of a navbar is light gray, but it can be updated to one of the supported colors by using the `color` property.
-
-Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
-
-<design-land-example-viewer-container example="navbar-theming"></design-land-example-viewer-container>
-
-## Contained Navbar
-A navbar can be contained to a specific width by using `<daff-container>`. [View Container Documentation](/libs/design/src/atoms/container/README.md) The layout styles for the navbar will be passed down to the container by utilizing the `daffManageContainerLayoutMixin`.
-
-<design-land-example-viewer-container example="contained-navbar"></design-land-example-viewer-container>
-
-## Raised Navbar
-The raised property adds elevation to a navbar. To enable it, set the `raised` property on `<nav daff-navbar>`.
-
-<design-land-example-viewer-container example="raised-navbar"></design-land-example-viewer-container>
-
-## Accessibility
-Daffodil enforces the usage of the native `<nav>` HTML element to ensure an accessible experience by default. If more than one navbar is used, every navbar should be given a meaningful label by using the `aria-labelledby` attribute.
-
-### Example
-```html
-<nav daff-navbar aria-labelledby="main-navigation">
-<!--  navigation items -->
-</nav>
-
-<footer>
-  <nav daff-navbar aria-labelledby="footer-navigation">
-  <!--  navigation items -->
-  </nav>
-</footer>
-```

package/src/molecules/paginator/README.md

@@ -1,11 +0,0 @@
-# Paginator
-Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.
-
-## Truncation
-An ellipsis is used to truncate pages when the number of pages exceed the maximum display limit. Double truncation appears when the current page is separated by more than three pages from both the first and last page.
-
-## Accessibility
-Use `aria-label` or `aria-labelledby` to give a meaningful label to `daff-paginator` that describes the content controlled by the paginator. If more than one paginator component is used on a page, each will need a unique `aria-label`.
-
-## Usage
-<design-land-example-viewer-container example="basic-paginator"></design-land-example-viewer-container>

package/src/molecules/sidebar/README.md

@@ -1,20 +0,0 @@
-# Sidebar Component
-
-## Usage
-
-```
-<daff-sidebar-viewport>
-    <daff-sidebar></daff-sidebar>
-    <p>Some Content</p>
-</daff-sidebar-viewport>
-```
-
-
-### Goals
-
-1. Support position sticky inside sidebar content
-2. Support 1 sidebar at a time on each side
-3. Support viewports inside of other viewports.
-4. A `global` flag that can be set to use `dvh`
-5. Sidebars as the window size changes from `side` to `over` and vice-versa by default.
-6. Where does the body scrollbar start and end? Does it hit the header of go to the top of the document.

package/tree/daffodil-design-tree.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@daffodil/design/tree" />
-export * from './index';

package/tree/examples/daffodil-design-tree-examples.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@daffodil/design/tree/examples" />
-export * from './index';

package/tree/examples/package.json

@@ -1 +0,0 @@
-{"name":"@daffodil/design/tree/examples","module":"../../fesm2015/daffodil-design-tree-examples.mjs","es2020":"../../fesm2020/daffodil-design-tree-examples.mjs","esm2020":"../../esm2020/tree/examples/daffodil-design-tree-examples.mjs","fesm2020":"../../fesm2020/daffodil-design-tree-examples.mjs","fesm2015":"../../fesm2015/daffodil-design-tree-examples.mjs","typings":"daffodil-design-tree-examples.d.ts","sideEffects":false,"version":"0.63.1"}

package/tree/package.json

@@ -1 +0,0 @@
-{"name":"@daffodil/design/tree","module":"../fesm2015/daffodil-design-tree.mjs","es2020":"../fesm2020/daffodil-design-tree.mjs","esm2020":"../esm2020/tree/daffodil-design-tree.mjs","fesm2020":"../fesm2020/daffodil-design-tree.mjs","fesm2015":"../fesm2015/daffodil-design-tree.mjs","typings":"daffodil-design-tree.d.ts","sideEffects":false,"version":"0.63.1"}