@nypl/design-system-react-components 0.25.2 → 0.25.6

package/src/utils/componentCategories.ts

@@ -3,7 +3,7 @@
 const categories = {
   basicContent: {
     title: "Components/Basic Elements",
-    components: ["Card", "CardEdition", "Hero", "Promo", "Sponsor", "Table"],
+    components: ["Card", "Hero", "Promo", "Sponsor", "Table"],
   },
   contentDisplay: {
     title: "Components/Content Display",
@@ -19,7 +19,7 @@ const categories = {
   },
   deprecated: {
     title: "Components/Deprecated",
-    components: [],
+    components: ["CardEdition", "Input"],
   },
   feedback: {
     title: "Components/Feedback",
@@ -40,9 +40,9 @@ const categories = {
       "DatePicker",
       "DateRangePicker",
       "Dropdown",
+      "Fieldset",
       "FileUploader",
       "Form",
-      "Input",
       "Label",
       "NumberInput",
       "Radio",
@@ -111,6 +111,7 @@ const categories = {
       "Breakpoints",
       "Buttons",
       "Colors",
+      "Design Tokens",
       "Forms",
       "Iconography",
       "Spacing",

package/dist/components/Image/Image.stories.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import Image from "./Image";
-declare const _default: {
-    title: any;
-    component: typeof Image;
-};
-export default _default;
-export declare const ImageWithOptionalCaptionandCredit: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-        jest: string[];
-    };
-};

package/dist/theme/components/customCheckboxGroup.d.ts

@@ -1,18 +0,0 @@
-declare const CustomCheckboxGroup: {
-    parts: string[];
-    baseStyle: {
-        legend: {
-            fontSize: string;
-            marginBottom: string;
-        };
-        required: {
-            marginLeft: string;
-        };
-        helper: {
-            marginTop: string;
-        };
-    };
-    sizes: {};
-    defaultProps: {};
-};
-export default CustomCheckboxGroup;

package/dist/theme/components/customRadioGroup.d.ts

@@ -1,18 +0,0 @@
-declare const CustomRadioGroup: {
-    parts: string[];
-    baseStyle: {
-        legend: {
-            fontSize: string;
-            marginBottom: string;
-        };
-        required: {
-            marginLeft: string;
-        };
-        helper: {
-            marginTop: string;
-        };
-    };
-    sizes: {};
-    defaultProps: {};
-};
-export default CustomRadioGroup;

package/src/components/Button/_Button.scss

@@ -1,32 +0,0 @@
-// Keeping `button-base` and `button--outline` for the
-// Accordion component until that component is updated.
-@mixin button-base {
-  border-radius: 2px !important;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  padding: var(--space-xs) var(--space-s) !important;
-  text-decoration: none;
-}
-
-@mixin button--outline {
-  @include button-base;
-
-  background-color: var(--ui-white);
-  border: 1px solid var(--ui-gray-light-cool);
-  color: inherit;
-
-  &:visited {
-    color: inherit;
-  }
-
-  &:hover {
-    background-color: var(--ui-gray-xx-light-cool);
-  }
-
-  &:disabled {
-    background-color: var(--ui-gray-light-cool);
-    color: var(--ui-gray-dark);
-    pointer-events: none;
-  }
-}

package/src/components/Card/_Card.scss

@@ -1,308 +0,0 @@
-.card {
-  align-items: flex-start;
-  display: flex;
-  flex-flow: column wrap;
-
-  .card__image {
-    margin-bottom: var(--space-s);
-    width: 100%;
-
-    &--small {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 165px;
-    }
-
-    &--medium {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 225px;
-    }
-
-    &--large {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 360px;
-    }
-
-    .image-wrap {
-      box-sizing: border-box;
-      height: 0;
-      overflow: hidden;
-      padding-bottom: 100%;
-      position: relative;
-      width: 100%;
-
-      &--sixteen-by-nine {
-        padding-bottom: 56.25%;
-      }
-
-      &--three-by-two {
-        padding-bottom: 66.66%;
-      }
-
-      &--two-by-one {
-        padding-bottom: 50%;
-      }
-
-      &--four-by-three {
-        padding-bottom: 75%;
-      }
-
-      &--square {
-        padding-bottom: 100%;
-      }
-
-      &--three-by-four {
-        padding-bottom: 133.33%;
-      }
-
-      &--one-by-two {
-        padding-bottom: 200%;
-      }
-    }
-
-    .image-crop {
-      box-sizing: border-box;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-
-    .image {
-      box-sizing: border-box;
-      display: block;
-      height: 100%;
-      object-fit: cover;
-      position: relative;
-      width: 100%;
-    }
-
-    &--original {
-      height: auto;
-      overflow: hidden;
-      padding-bottom: 0;
-
-      .image-crop {
-        height: auto;
-        position: relative;
-      }
-
-      .image {
-        object-fit: none;
-      }
-    }
-  }
-
-  .card__body {
-    @include breakpoint($breakpoint-medium) {
-      display: block;
-      flex-flow: row nowrap;
-    }
-
-    .card-content {
-      @include space-stack-s;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .card-actions {
-      @include space-stack-s;
-
-      column-gap: var(--space-xs);
-      display: flex;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &--top-border {
-        border-top: 1px solid var(--ui-gray-medium);
-        padding-top: var(--space-xs);
-      }
-
-      &--bottom-border {
-        border-bottom: 1px solid var(--ui-gray-medium);
-        padding-bottom: var(--space-xs);
-      }
-    }
-  }
-
-  &--center {
-    text-align: center;
-
-    /* stylelint-disable */
-    .card-actions {
-      justify-content: center;
-    }
-    /* stylelint-enable */
-    .card__body {
-      margin: auto;
-    }
-  }
-
-  &--with-border {
-    border: 1px solid var(--ui-gray-medium);
-
-    .card__body {
-      padding: var(--space-s);
-    }
-
-    &.card--has-image {
-      .card__body {
-        padding: 0 var(--space-s) var(--space-s);
-      }
-    }
-  }
-
-  &--at-end {
-    .card__image {
-      margin-bottom: 0;
-      margin-top: var(--space-s);
-      order: 2;
-    }
-  }
-
-  &.card--row {
-    display: flex;
-    flex-flow: column nowrap;
-    max-width: 100%;
-    text-align: left;
-
-    /* stylelint-disable */
-    .card-actions {
-      justify-content: left;
-    }
-    /* stylelint-enable */
-    &.card--center {
-      align-items: center;
-
-      .card__body {
-        margin: 0;
-      }
-    }
-
-    @include breakpoint($breakpoint-medium) {
-      flex-flow: row;
-    }
-
-    .card__image {
-      @include breakpoint($breakpoint-medium) {
-        flex: 0 0 225px;
-        margin: 0 var(--space-m) 0 0;
-        max-width: 50%;
-
-        &--small {
-          flex: 0 0 165px;
-        }
-
-        &--medium {
-          flex: 0 0 225px;
-        }
-
-        &--large {
-          flex: 0 0 360px;
-        }
-      }
-    }
-
-    &.card--at-end {
-      .card__image {
-        margin: var(--space-m) 0 0;
-
-        @include breakpoint($breakpoint-medium) {
-          margin: 0 0 0 var(--space-m);
-        }
-      }
-    }
-
-    &.card--with-border {
-      .card__body {
-        padding: var(--space-s);
-      }
-
-      &.card--has-image {
-        .card__body {
-          padding: 0 var(--space-s) var(--space-s);
-
-          @include breakpoint($breakpoint-medium) {
-            padding: var(--space-s) var(--space-s) var(--space-s) 0;
-          }
-        }
-
-        &.card--at-end {
-          .card__body {
-            padding: var(--space-s) var(--space-s) 0;
-
-            @include breakpoint($breakpoint-medium) {
-              padding: var(--space-s) 0 var(--space-s) var(--space-s);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Stories-only styles
-.sb-show-main {
-  .var-docs {
-    padding: 0 0 var(--space) 0;
-  }
-
-  .example-card {
-    .card__content {
-      > * {
-        @include space-stack-xxs;
-      }
-    }
-
-    .book__callout {
-      // formerly imported with @include heading-xs;
-      font-size: var(--font-size-1);
-      font-weight: 400;
-      line-height: 1.15;
-      margin: 0 0 0.5em;
-      width: auto;
-
-      &__link {
-        color: inherit;
-
-        &:hover {
-          color: inherit;
-        }
-      }
-
-      /* stylelint-disable */
-      font-style: italic;
-      font-weight: 300;
-      /* stylelint-enable */
-    }
-
-    .card__ctas {
-      align-items: flex-end;
-      display: flex;
-      flex-flow: row wrap;
-
-      .button {
-        width: 100%;
-      }
-
-      > * {
-        @include space-stack-xxs;
-      }
-    }
-
-    .book__filetype {
-      @include space-stack-s;
-    }
-
-    .book__description {
-      font-style: italic;
-    }
-  }
-}

package/src/components/Image/Image.stories.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-
-import Image from "./Image";
-import { text, boolean, select } from "@storybook/addon-knobs";
-import { getCategory } from "../../utils/componentCategories";
-
-export default {
-  title: getCategory("Image"),
-  component: Image,
-};
-
-let showCaption, showCredit;
-
-const imageRatios = {
-  "1x1": "https://placeimg.com/100/100/animals",
-  "2x1": "https://placeimg.com/200/100/animals",
-  "3x4": "https://placeimg.com/150/200/animals",
-  "4x1": "https://placeimg.com/400/100/animals",
-  "4x3": "https://placeimg.com/200/150/animals",
-  "16x9": "https://placeimg.com/400/225/animals",
-};
-
-export const ImageWithOptionalCaptionandCredit = () => (
-  <>
-    {boolean("Show Caption", true)
-      ? (showCaption = true)
-      : (showCaption = false)}
-    {boolean("Show Credit", true) ? (showCredit = true) : (showCredit = false)}
-    <Image
-      src={select("Initial Selected Option", imageRatios, imageRatios["2x1"])}
-      imageCaption={
-        showCaption
-          ? text("Image Caption", "Deserted Islander Relocator")
-          : null
-      }
-      imageCredit={
-        showCredit ? text("Image Credit", "Taken by Tom Nook") : null
-      }
-      modifiers={boolean("Apply Circle Mask", false) ? ["circle"] : null}
-      alt={text("Image alt", "alt")}
-    />
-  </>
-);
-
-ImageWithOptionalCaptionandCredit.storyName =
-  "Image with Optional Caption and Credit";
-ImageWithOptionalCaptionandCredit.parameters = {
-  design: {
-    type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
-  },
-  jest: ["Image.test.tsx"],
-};

package/src/components/Image/_Image.scss

@@ -1,38 +0,0 @@
-.image {
-  display: block;
-  height: auto;
-  max-width: 100%;
-
-  &--circle {
-    border-radius: 50%;
-  }
-}
-
-.nypl-ds {
-  figure {
-    margin: unset;
-  }
-}
-
-.figure {
-  &__image {
-    @include space-stack-xxs;
-
-    &--circle {
-      border-radius: 50%;
-    }
-  }
-
-  &__figcaption {
-    font-style: italic;
-  }
-}
-
-.figcaption {
-  &__credit,
-  &__caption {
-    @include space-stack-xxs;
-
-    font-size: var(--font-size--1);
-  }
-}

package/src/components/Pagination/_Pagination.scss

@@ -1,40 +0,0 @@
-.pagination {
-  @include space-stack-l;
-
-  align-items: stretch;
-  display: flex;
-  width: 100%;
-
-  > * {
-    &:not(:last-child) {
-      @include space-inline-xs;
-    }
-  }
-
-  &__list {
-    @include list-reset;
-
-    display: flex;
-  }
-
-  &__item {
-    @include space-inline-xs;
-
-    list-style-type: none;
-  }
-
-  &__link {
-    line-height: 1.15;
-    text-decoration: none;
-
-    &.selected {
-      color: var(--ui-black);
-      pointer-events: none;
-    }
-
-    &.disabled {
-      color: var(--ui-gray-dark);
-      pointer-events: none;
-    }
-  }
-}

package/src/components/SkeletonLoader/_SkeletonLoader.scss

@@ -1,142 +0,0 @@
-@mixin skeleton-highlight {
-  animation: Pulsate 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite;
-  background: var(--ui-gray-light-warm);
-}
-
-.skeleton-loader {
-  margin: auto;
-  width: 100%;
-
-  .skeleton-section {
-    margin-bottom: var(--space-s);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .skeleton-element {
-    border-radius: 2px;
-    box-sizing: border-box;
-    margin-bottom: var(--space-xs);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .skeleton-loader-image {
-    @include skeleton-highlight;
-
-    box-sizing: border-box;
-    height: 0;
-    overflow: hidden;
-    padding-bottom: 100%;
-    position: relative;
-    width: 100%;
-
-    &--square {
-      padding-bottom: 100%;
-    }
-
-    &--portrait {
-      padding-bottom: 200%;
-    }
-
-    &--landscape {
-      padding-bottom: 50%;
-    }
-  }
-
-  .skeleton-loader-heading {
-    @include skeleton-highlight;
-
-    height: 32px;
-
-    &:last-child {
-      width: 80%;
-    }
-  }
-
-  .skeleton-loader-content {
-    @include skeleton-highlight;
-
-    height: 20px;
-
-    &:last-child {
-      width: 30%;
-    }
-  }
-
-  .skeleton-loader-button {
-    @include skeleton-highlight;
-
-    border-radius: 16px;
-    height: 32px;
-    margin: auto;
-    max-width: 160px;
-    width: 100%;
-  }
-
-  &--border {
-    border: 1px solid var(--ui-gray-light-cool);
-    padding: var(--space-s);
-  }
-
-  &--row {
-    @include breakpoint($breakpoint-medium) {
-      display: flex;
-
-      /* stylelint-disable */
-      .skeleton-section {
-        margin-right: var(--space-m);
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      > .skeleton-section:first-child {
-        margin-bottom: 0;
-      }
-
-      .skeleton-loader-image {
-        height: 0;
-        overflow: visible;
-        padding-bottom: 0;
-        position: relative;
-        width: 220px;
-
-        &--square {
-          height: 220px;
-        }
-
-        &--portrait {
-          height: 440px;
-        }
-
-        &--landscape {
-          height: 110px;
-        }
-      }
-
-      .skeleton-loader-button {
-        margin: 0;
-      }
-    }
-  }
-}
-
-@keyframes Pulsate {
-  from {
-    opacity: 0.9;
-  }
-
-  50% {
-    opacity: 0.6;
-  }
-
-  to {
-    opacity: 0.9;
-  }
-}