@nypl/design-system-react-components 1.5.4 → 1.6.0-vite-rc-2

package/dist/helpers/types.d.ts

@@ -1 +0,0 @@
-export declare type LayoutTypes = "column" | "row";

package/dist/hooks/__tests__/useCarouselStyles.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/hooks/__tests__/useFilterBar.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/hooks/__tests__/useMultiSelect.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/hooks/__tests__/useNYPLBreakpoints.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/index.d.ts

@@ -1,66 +0,0 @@
-import "./styles.scss";
-export { Box, Center, Circle, ColorModeScript, cookieStorageManager, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, VStack, } from "@chakra-ui/react";
-export { default as Accordion, AccordionTypes, } from "./components/Accordion/Accordion";
-export { default as AlphabetFilter } from "./components/AlphabetFilter/AlphabetFilter";
-export { default as AudioPlayer, AudioType, } from "./components/AudioPlayer/AudioPlayer";
-export { default as Breadcrumbs, BreadcrumbsTypes, } from "./components/Breadcrumbs/Breadcrumbs";
-export { default as Button, ButtonTypes } from "./components/Button/Button";
-export { default as ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
-export { default as Card, CardActions, CardContent, CardHeading, } from "./components/Card/Card";
-export { default as Checkbox } from "./components/Checkbox/Checkbox";
-export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
-export { default as ColorCard } from "./components/StyleGuide/ColorCard";
-export { default as DatePicker, DatePickerTypes, FullDateType, } from "./components/DatePicker/DatePicker";
-export { default as DSProvider } from "./theme/provider";
-export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBox/FeedbackBox";
-export { default as Fieldset } from "./components/Fieldset/Fieldset";
-export { default as FilterBar } from "./components/FilterBar/FilterBar";
-export { default as Footer } from "./components/Footer/Footer";
-export { default as Form, FormField, FormRow } from "./components/Form/Form";
-export { default as Header } from "./components/Header/Header";
-export { default as Heading, HeadingSizes, HeadingLevels, } from "./components/Heading/Heading";
-export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
-export { default as Hero, HeroTypes } from "./components/Hero/Hero";
-export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
-export { default as Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, } from "./components/Icons/Icon";
-export { default as Image, ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/Image";
-export { default as Label } from "./components/Label/Label";
-export { LayoutTypes } from "./helpers/types";
-export { default as Link, LinkTypes } from "./components/Link/Link";
-export { default as List, ListTypes } from "./components/List/List";
-export { default as Logo, LogoNames, LogoSizes } from "./components/Logo/Logo";
-export { ModalTrigger, useModal } from "./components/Modal/Modal";
-export { default as MultiSelect, MultiSelectProps, MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
-export { default as MultiSelectGroup, MultiSelectGroupProps, } from "./components/MultiSelectGroup/MultiSelectGroup";
-export { default as Notification, NotificationTypes, } from "./components/Notification/Notification";
-export { default as Pagination } from "./components/Pagination/Pagination";
-export { default as ProgressIndicator, ProgressIndicatorSizes, ProgressIndicatorTypes, } from "./components/ProgressIndicator/ProgressIndicator";
-export { default as Radio } from "./components/Radio/Radio";
-export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
-export { default as SearchBar } from "./components/SearchBar/SearchBar";
-export { default as Select, LabelPositions } from "./components/Select/Select";
-export { default as SimpleGrid, GridGaps } from "./components/Grid/SimpleGrid";
-export { default as SkeletonLoader, SkeletonLoaderImageRatios, } from "./components/SkeletonLoader/SkeletonLoader";
-export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
-export { default as Slider } from "./components/Slider/Slider";
-export { default as StatusBadge, StatusBadgeTypes, } from "./components/StatusBadge/StatusBadge";
-export { default as StructuredContent, StructuredContentImagePosition, } from "./components/StructuredContent/StructuredContent";
-export { default as StyledList } from "./components/StyledList/StyledList";
-export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
-export { default as TagSet } from "./components/TagSet/TagSet";
-export { TagSetExploreDataProps } from "./components/TagSet/TagSetExplore";
-export { TagSetFilterDataProps } from "./components/TagSet/TagSetFilter";
-export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
-export { default as Text, TextSizes } from "./components/Text/Text";
-export { default as TextInput, TextInputRefType, TextInputTypes, } from "./components/TextInput/TextInput";
-export { default as Toggle, ToggleSizes } from "./components/Toggle/Toggle";
-export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
-export { default as useCloseDropDown } from "./hooks/useCloseDropDown";
-export { default as useFilterBar } from "./hooks/useFilterBar";
-export { default as useMultiSelect } from "./hooks/useMultiSelect";
-export { default as useNYPLBreakpoints } from "./hooks/useNYPLBreakpoints";
-export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
-export { default as useWindowSize } from "./hooks/useWindowSize";
-export { default as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
-export { default as Table } from "./components/Table/Table";
-export { default as Tooltip } from "./components/Tooltip/Tooltip";

package/dist/index.js

@@ -1,8 +0,0 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./design-system-react-components.cjs.production.min.js')
-} else {
-  module.exports = require('./design-system-react-components.cjs.development.js')
-}

package/dist/resources.scss

@@ -1,382 +0,0 @@
-/**
- * Breakpoint Configuration
- * @see https://github.com/Team-Sass/breakpoint/wiki
- */
-
-// Global Breakpoints
-
-// Avoid using in favor of atomic, content-specific, breakpoints.
-// These should be used for generic code, like layouts and typography, only.
-// The CSS variables and the Sass variables below need to stay in sync.
-// Sass' breakpoint() mixin doesn't work without Sass variables.
-// CSS variables expose the breakpoint variables to consumers.
-:root {
-  --nypl-breakpoint-small: 320px;
-  --nypl-breakpoint-medium: 600px;
-  --nypl-breakpoint-large: 960px;
-  --nypl-breakpoint-xl: 1280px;
-}
-
-$nypl-breakpoint-small: 320px;
-$nypl-breakpoint-medium: 600px;
-$nypl-breakpoint-large: 960px;
-$nypl-breakpoint-xl: 1280px;
-// The max-width breakpoint is used when the design should be applied at
-// whatever the largest breakpoint is regardless of actual pixel value,
-// e.g. removing outer margin on body wrapper.
-$nypl-max-width: $nypl-breakpoint-xl;
-
-/////////////////////
-// General Mixins (put specific ones in component files where applicable)
-
-/// Mixin - Clearfix.
-/// Adds clearfix based on http://bourbon.io/docs/#clearfix
-/// use example = @include clearfix
-
-@mixin clearfix {
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}
-
-@mixin list-reset {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-@mixin fieldset-reset {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-/// Mixin - Wrapper
-/// Outer container mixin for large screens
-@mixin wrapper(
-  $container-max-width: $max-width,
-  $outer-container-break: $nypl-breakpoint-small,
-  $v-margin: 0,
-  $v-padding: 0,
-  $h-padding: var(--nypl-space-s)
-) {
-  margin: #{$v-margin} auto;
-  max-width: #{$container-max-width};
-  padding: #{$v-padding} #{$h-padding};
-  width: 100%;
-}
-
-/// Use the breakout mixin for elements that should be edge-to-edge
-/// Even when a parent container uses the wrapper mixin
-@mixin breakout($v-padding: var(--nypl-space-s)) {
-  margin-left: calc(-50vw + 50%);
-  margin-right: calc(-50vw + 50%);
-}
-
-// Use the screenreader-only mixin for elements that you want to be visually hidden, but still want screenreaders to read out
-@mixin screenreader-only() {
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute !important;
-  width: 1px;
-  word-wrap: normal;
-}
-
-// Focus state mixin
-@mixin focus-outline($darkBackground: false) {
-  outline: 2px solid var(--nypl-colors-ui-focus);
-  outline-offset: 2px;
-  z-index: 9999;
-
-  @if $darkBackground {
-    outline-color: var(--nypl-colors-ui-white);
-  }
-}
-
-//Convert pixel values to rem
-@function to-rem($size) {
-  @return $size / 16px * 1rem;
-}
-
-//Process a color variable so that it can be used in a data URI/URL
-@function url-friendly-colour($colour) {
-  @return "%23" + str-slice("#{$colour}", 2, -1);
-}
-
-@mixin placeholder {
-  &::-webkit-input-placeholder {
-    @content;
-  }
-
-  &::-moz-placeholder {
-    @content;
-
-    opacity: 1;
-  }
-
-  &:-moz-placeholder {
-    @content;
-  }
-
-  &:-ms-input-placeholder {
-    @content;
-  }
-}
-
-/**
- * --nypl-space-xxs: --nypl-space-s / 4  //  4px or 0.25rem
- * --nypl-space-xs: --nypl-space-s / 2   //  8px or 0.5rem
- * --nypl-space-s: --nypl-space-s * 1;   // 16px or 1rem
- * --nypl-space-m: --nypl-space * 1.5;   // 24px or 1.5rem
- * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
- * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
- * --nypl-space-xxl: --nypl-space * 4;   // 64px or 4rem
- */
-
-@mixin space-inline-none {
-  margin-right: 0;
-}
-
-@mixin space-inline-xxs {
-  margin-right: var(--nypl-space-xxs);
-}
-
-@mixin space-inline-xs {
-  margin-right: var(--nypl-space-xs);
-}
-
-@mixin space-inline-s {
-  margin-right: var(--nypl-space-s);
-}
-
-@mixin space-inline-m {
-  margin-right: var(--nypl-space-m);
-}
-
-@mixin space-inline-l {
-  margin-right: var(--nypl-space-l);
-}
-
-@mixin space-inline-xl {
-  margin-right: var(--nypl-space-xl);
-}
-
-@mixin space-inline-xxl {
-  margin-right: var(--nypl-space-xxl);
-}
-
-@mixin get-space-inline($id) {
-  @if $id == "none" {
-    @include space-inline-none;
-  }
-
-  @if $id == "xxs" {
-    @include space-inline-xxs;
-  }
-
-  @if $id == "xs" {
-    @include space-inline-xs;
-  }
-
-  @if $id == "s" {
-    @include space-inline-s;
-  }
-
-  @if $id == "m" {
-    @include space-inline-m;
-  }
-
-  @if $id == "l" {
-    @include space-inline-l;
-  }
-
-  @if $id == "xl" {
-    @include space-inline-xl;
-  }
-
-  @if $id == "xxl" {
-    @include space-inline-xxl;
-  }
-
-  @if $id == "xxxl" {
-    @include space-inline-xxxl;
-  }
-}
-
-/**
- * --nypl-space-xs: --nypl-space-s / 2   //  8px or 0.5rem
- * --nypl-space-s: --nypl-space-s * 1;   // 16px or 1rem
- * --nypl-space-m: --nypl-space * 1.5;   // 24px or 1.5rem
- * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
- * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
- */
-
-@mixin space-inset-none {
-  padding: 0;
-}
-
-@mixin space-inset-xs {
-  padding: var(--nypl-space-xs);
-}
-
-@mixin space-inset-s {
-  padding: var(--nypl-space-s);
-}
-
-@mixin space-inset-m {
-  padding: var(--nypl-space-m);
-}
-
-@mixin space-inset-l {
-  padding: var(--nypl-space-l);
-}
-
-@mixin space-inset-xl {
-  padding: var(--nypl-space-xl);
-}
-
-@mixin get-space-inset($id) {
-  @if $id == "none" {
-    @include space-inset-none;
-  }
-
-  @if $id == "xs" {
-    @include space-inset-xs;
-  }
-
-  @if $id == "s" {
-    @include space-inset-s;
-  }
-
-  @if $id == "m" {
-    @include space-inset-m;
-  }
-
-  @if $id == "l" {
-    @include space-inset-l;
-  }
-
-  @if $id == "xl" {
-    @include space-inset-xl;
-  }
-}
-
-/**
- * --nypl-space-xxs: --nypl-space-s / 4   //  4px or 0.25rem
- * --nypl-space-xs: --nypl-space-s / 2    //  8px or 0.5rem
- * --nypl-space-s: --nypl-space-s * 1;    // 16px or 1rem
- * --nypl-space-m: --nypl-space-s * 1.5;  // 24px or 1.5rem
- * --nypl-space-l: --nypl-space-s * 2;    // 32px or 2rem
- * --nypl-space-xl: --nypl-space-s * 3;   // 48px or 3rem
- * --nypl-space-xxl: --nypl-space-s * 4;  // 64px or 4rem
- * --nypl-space-xxxl: --nypl-space-s * 6; // 96px or 6rem
- */
-
-@mixin space-stack-none {
-  margin-bottom: 0;
-}
-
-@mixin space-stack-xxs {
-  margin-bottom: var(--nypl-space-xxs);
-}
-
-@mixin space-stack-xs {
-  margin-bottom: var(--nypl-space-xs);
-}
-
-@mixin space-stack-s {
-  margin-bottom: var(--nypl-space-s);
-}
-
-@mixin space-stack-m {
-  margin-bottom: var(--nypl-space-m);
-}
-
-@mixin space-stack-l {
-  margin-bottom: var(--nypl-space-l);
-}
-
-@mixin space-stack-xl {
-  margin-bottom: var(--nypl-space-xl);
-}
-
-@mixin space-stack-xxl {
-  margin-bottom: var(--nypl-space-xxl);
-}
-
-@mixin space-stack-xxxl {
-  margin-bottom: var(--nypl-space-xxxl);
-}
-
-@mixin space-stack-page {
-  @include space-stack-l;
-
-  @include breakpoint($nypl-breakpoint-large) {
-    @include space-stack-xl;
-  }
-
-  &--full {
-    @include space-stack-xxl;
-
-    @include breakpoint($nypl-breakpoint-large) {
-      @include space-stack-xxxl;
-    }
-  }
-}
-
-@mixin remove-stack-page {
-  margin-top: calc(-1 * 32px);
-
-  @include breakpoint($nypl-breakpoint-large) {
-    margin-top: calc(-1 * 48px);
-  }
-
-  &--full {
-    margin-top: calc(-1 * 64px);
-
-    @include breakpoint($nypl-breakpoint-large) {
-      margin-top: calc(-1 * 96px);
-    }
-  }
-}
-
-@mixin get-space-stack($id) {
-  @if $id == "none" {
-    @include space-stack-none;
-  }
-
-  @if $id == "xxs" {
-    @include space-stack-xxs;
-  }
-
-  @if $id == "xs" {
-    @include space-stack-xs;
-  }
-
-  @if $id == "s" {
-    @include space-stack-s;
-  }
-
-  @if $id == "m" {
-    @include space-stack-m;
-  }
-
-  @if $id == "l" {
-    @include space-stack-l;
-  }
-
-  @if $id == "xl" {
-    @include space-stack-xl;
-  }
-
-  @if $id == "xxl" {
-    @include space-stack-xxl;
-  }
-
-  @if $id == "xxxl" {
-    @include space-stack-xxxl;
-  }
-}

package/dist/theme/types.d.ts

@@ -1 +0,0 @@
-export declare type Dict<T = any> = Record<string, T>;

package/dist/utils/componentCategories.d.ts

@@ -1 +0,0 @@
-export declare const getCategory: (component: string) => string;