Merge pull request #1412 from NYPL/development

Release v1.7.2

Author: bigfishdesign13

CHANGELOG.md

@@ -8,6 +8,18 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.7.2 (August 31 , 2023)
+
+### Adds
+
+- Adds the `"actionIdentity"`, `"actionIdentityFilled"`, `"actionSearch"`, `"mapsPlace"`, `"socialSpotify"`, and `"socialVimeo"` options to the `Icon` component.
+
+### Updates
+
+- Updates `List` styling so the bottom border on description lists matches other borders.
+- Updates type `IconRotationTypes` to `IconRotations`.`IconRotationTypes` will still work for now, but is deprecated and will be removed in a later version.
+- Updates `Modal` component documentation.
+
 ## 1.7.1 (August 17, 2023)
 
 ### Adds

icons/svg/action-identity-filled.svg

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",

icons/svg/action-identity.svg

@@ -10,7 +10,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `1.7.1`    |
+| Latest            | `1.7.2`    |
 
 ## Table of Contents
 
@@ -53,7 +53,7 @@ Resources:
 
 ## Rotations
 
-Passing an `iconRotation` prop with a value from `IconRotationTypes` allows
+Passing an `iconRotation` prop with a value from `IconRotations` allows
 the icon to be rotated when it is rendered. The values are:
 `"rotate0"`, `"rotate90"`, `"rotate180"`, and `"rotate270"`.
 
@@ -121,21 +121,23 @@ fill the full width of the parent element.
 
 The following icons are for generic purposes. All the available icon names can
 be found in the `IconNames` type. They are: `"accessibilityFull"`,
-`"accessibilityPartial"`, `"actionCheckCircle"`, `"actionExit"`,
-`"actionHelpDefault"`, `"actionHelpOutline"`, `"alertNotificationImportant"`,
-`"actionLaunch"`, `"actionPower"`, `"actionSettings"`, `"arrow"`, `"building"`,
-`"check"`, `"clock"`, `"close"`, `"decorativeEnvelope"`,
-`"decorativeLibraryCard"`, `"decorativeShoppingBag"`, `"download"`,
-`"errorFilled"`, `"errorOutline"`, `"fileTypeAudio"`, `"fileTypeDoc"`,
-`"fileTypeGenericDoc"`, `"fileTypeImage"`, `"fileTypePdf"`,
+`"accessibilityPartial"`, `"actionCheckCircle"`, `"actionCheckCircleFilled"`,
+`"actionExit"`, `"actionHelpDefault"`, `"actionHelpOutline"`,
+`"actionIdentity"`, `"actionIdentityFilled"`, `"actionLaunch"`, `"actionPower"`,
+`"actionRegistration"`, `"actionSearch"`, `"actionSettings"`,
+`"alertNotificationImportant"`, `"alertWarningFilled"`, `"alertWarningOutline"`,
+`"arrow"`, `"building"`, `"check"`, `"clock"`, `"close"`,
+`"decorativeEnvelope"`, `"decorativeLibraryCard"`, `"decorativeShoppingBag"`,
+`"download"`, `"errorFilled"`, `"errorOutline"`, `"fileTypeAudio"`,
+`"fileTypeDoc"`, `"fileTypeGenericDoc"`, `"fileTypeImage"`, `"fileTypePdf"`,
 `"fileTypeSpreadsheet"`, `"fileTypeVideo"`, `"headset"`,
 `"legacyAccountFilled"`, `"legacyAccountUnfilled"`, `"legacySocialFacebook"`,
 `"legacySocialInstagram"`, `"legacySocialTwitter"`, `"legacySocialYoutube"`,
-`"locator"`, `"minus"`,`"plus"`, `"search"`, `"socialFacebook"`,
-`"socialInstagram"`,`"socialPinterest"`, `"socialSoundCloud"`, `"socialTiktok"`,
-`"socialTumblr"`, `"socialTwitter"`, `"socialYoutube"`, `"speakerNotes"`,
-`"utilityAccountFilled"`, `"utilityAccountUnfilled"`, `"utilityHamburger"`,
-`"utilitySearch"`.
+`"locator"`, `"mapsPlace"`, `"minus"`, `"plus"`, `"search"`, `"socialFacebook"`,
+`"socialInstagram"`, `"socialPinterest"`, `"socialSoundCloud"`,
+`"socialSpotify"`, `"socialTikTok"`, `"socialTumblr"`, `"socialTwitter"`,
+`"socialVimeo"`, `"socialYoutube"`, `"speakerNotes"`, `"utilityAccountFilled"`,
+`"utilityAccountUnfilled"`, `"utilityHamburger"`, `"utilitySearch"`.
 
 Note: All of the examples below have been rendered with the `size` prop set to
 `xxlarge`.

icons/svg/action-search.svg

@@ -7,7 +7,7 @@ import {
   iconAlignArray,
   iconColorsArray,
   iconNamesArray,
-  iconRotationTypesArray,
+  iconRotationsArray,
   iconSizesArray,
 } from "./iconVariables";
 
@@ -30,7 +30,7 @@ const meta: Meta<typeof Icon> = {
     },
     iconRotation: {
       control: { type: "radio" },
-      options: iconRotationTypesArray,
+      options: iconRotationsArray,
       table: { defaultValue: { summary: "rotate0" } },
     },
     id: { control: false },
@@ -134,12 +134,7 @@ const colors = [];
 const sizes = [];
 const iconColorsValues = iconColorsArray;
 const iconNamesValues = iconNamesArray;
-const iconRotationTypesValues = [
-  "rotate0",
-  "rotate90",
-  "rotate180",
-  "rotate270",
-];
+const iconRotationsValues = ["rotate0", "rotate90", "rotate180", "rotate270"];
 const iconSizesValues = [
   { size: "default", display: "default (100%)" },
   { size: "small", display: "small (14px)" },
@@ -157,11 +152,11 @@ for (const icon in iconNamesValues) {
     })
   );
 }
-for (const iconRotation in iconRotationTypesValues) {
+for (const iconRotation in iconRotationsValues) {
   rotations.push(
     iconRow("arrow", {
-      displayValue: iconRotationTypesValues[iconRotation],
-      iconRotation: iconRotationTypesValues[iconRotation],
+      displayValue: iconRotationsValues[iconRotation],
+      iconRotation: iconRotationsValues[iconRotation],
       size: "xxlarge",
     })
   );

icons/svg/maps-place.svg

@@ -11,15 +11,17 @@ import {
   iconAlignArray,
   iconColorsArray,
   iconNamesArray,
-  iconRotationTypesArray,
+  iconRotationsArray,
   iconSizesArray,
   iconTypesArray,
 } from "./iconVariables";
 
 export type IconAlign = typeof iconAlignArray[number];
 export type IconColors = typeof iconColorsArray[number];
 export type IconNames = typeof iconNamesArray[number];
-export type IconRotationTypes = typeof iconRotationTypesArray[number];
+export type IconRotations = typeof iconRotationsArray[number];
+// `IconRotationTypes` is deprecated; `IconRotations` should be used instead
+export type IconRotationTypes = typeof iconRotationsArray[number];
 export type IconSizes = typeof iconSizesArray[number];
 export type IconTypes = typeof iconTypesArray[number];
 
@@ -34,7 +36,7 @@ export interface IconProps {
    * by default. */
   decorative?: boolean;
   /** Rotates the icon clockwise in increments of 90deg */
-  iconRotation?: IconRotationTypes;
+  iconRotation?: IconRotations;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** The name of the icon you want to use. */

icons/svg/social-spotify.svg

@@ -6,9 +6,12 @@ import { ReactComponent as actionCheckCircleFilled } from "../../../icons/svg/ac
 import { ReactComponent as actionExit } from "../../../icons/svg/action-exit.svg";
 import { ReactComponent as actionHelpDefault } from "../../../icons/svg/action-help-default.svg";
 import { ReactComponent as actionHelpOutline } from "../../../icons/svg/action-help-outline.svg";
+import { ReactComponent as actionIdentity } from "../../../icons/svg/action-identity.svg";
+import { ReactComponent as actionIdentityFilled } from "../../../icons/svg/action-identity-filled.svg";
 import { ReactComponent as actionLaunch } from "../../../icons/svg/action-launch.svg";
 import { ReactComponent as actionPower } from "../../../icons/svg/action-power.svg";
 import { ReactComponent as actionRegistration } from "../../../icons/svg/action-registration.svg";
+import { ReactComponent as actionSearch } from "../../../icons/svg/action-search.svg";
 import { ReactComponent as actionSettings } from "../../../icons/svg/action-settings.svg";
 import { ReactComponent as alertNotificationImportant } from "../../../icons/svg/alert-notification-important.svg";
 import { ReactComponent as alertWarningFilled } from "../../../icons/svg/alert-warning-filled.svg";
@@ -39,16 +42,19 @@ import { ReactComponent as legacySocialInstagram } from "../../../icons/svg/lega
 import { ReactComponent as legacySocialTwitter } from "../../../icons/svg/legacy-social-twitter.svg";
 import { ReactComponent as legacySocialYoutube } from "../../../icons/svg/legacy-social-youtube.svg";
 import { ReactComponent as locator } from "../../../icons/svg/locator.svg";
+import { ReactComponent as mapsPlace } from "../../../icons/svg/maps-place.svg";
 import { ReactComponent as minus } from "../../../icons/svg/minus.svg";
 import { ReactComponent as plus } from "../../../icons/svg/plus.svg";
 import { ReactComponent as search } from "../../../icons/svg/search.svg";
 import { ReactComponent as socialFacebook } from "../../../icons/svg/social-facebook.svg";
 import { ReactComponent as socialInstagram } from "../../../icons/svg/social-instagram.svg";
 import { ReactComponent as socialPinterest } from "../../../icons/svg/social-pinterest.svg";
 import { ReactComponent as socialSoundCloud } from "../../../icons/svg/social-soundcloud.svg";
+import { ReactComponent as socialSpotify } from "../../../icons/svg/social-spotify.svg";
 import { ReactComponent as socialTikTok } from "../../../icons/svg/social-tiktok.svg";
 import { ReactComponent as socialTumblr } from "../../../icons/svg/social-tumblr.svg";
 import { ReactComponent as socialTwitter } from "../../../icons/svg/social-twitter.svg";
+import { ReactComponent as socialVimeo } from "../../../icons/svg/social-vimeo.svg";
 import { ReactComponent as socialYoutube } from "../../../icons/svg/social-youtube.svg";
 import { ReactComponent as speakerNotes } from "../../../icons/svg/speaker-notes.svg";
 import { ReactComponent as utilityAccountFilled } from "../../../icons/svg/utility-account-filled.svg";
@@ -64,9 +70,12 @@ export default {
   actionExit,
   actionHelpDefault,
   actionHelpOutline,
+  actionIdentity,
+  actionIdentityFilled,
   actionLaunch,
   actionPower,
   actionRegistration,
+  actionSearch,
   actionSettings,
   alertNotificationImportant,
   alertWarningFilled,
@@ -97,16 +106,19 @@ export default {
   legacySocialTwitter,
   legacySocialYoutube,
   locator,
+  mapsPlace,
   minus,
   plus,
   search,
   socialFacebook,
   socialInstagram,
   socialPinterest,
   socialSoundCloud,
+  socialSpotify,
   socialTikTok,
   socialTumblr,
   socialTwitter,
+  socialVimeo,
   socialYoutube,
   speakerNotes,
   utilityAccountFilled,

icons/svg/social-vimeo.svg

@@ -44,9 +44,12 @@ export const iconNamesArray = [
   "actionExit",
   "actionHelpDefault",
   "actionHelpOutline",
+  "actionIdentity",
+  "actionIdentityFilled",
   "actionLaunch",
   "actionPower",
   "actionRegistration",
+  "actionSearch",
   "actionSettings",
   "alertNotificationImportant",
   "alertWarningFilled",
@@ -77,24 +80,27 @@ export const iconNamesArray = [
   "legacySocialTwitter",
   "legacySocialYoutube",
   "locator",
+  "mapsPlace",
   "minus",
   "plus",
   "search",
   "socialFacebook",
   "socialInstagram",
   "socialPinterest",
   "socialSoundCloud",
+  "socialSpotify",
   "socialTikTok",
   "socialTumblr",
   "socialTwitter",
+  "socialVimeo",
   "socialYoutube",
   "speakerNotes",
   "utilityAccountFilled",
   "utilityAccountUnfilled",
   "utilityHamburger",
   "utilitySearch",
 ] as const;
-export const iconRotationTypesArray = [
+export const iconRotationsArray = [
   "rotate0",
   "rotate90",
   "rotate180",

package-lock.json

@@ -10,7 +10,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `1.5.3`    |
+| Latest            | `1.7.2`    |
 
 ## Table of Contents