@nypl/design-system-react-components 0.25.3 → 0.25.7

package/src/components/StyleGuide/Bidirectionality.stories.mdx

@@ -237,7 +237,7 @@ help reduce any visual mistakes.
 
 <Canvas>
   <DSProvider>
-    <div style={{ display: "flex", "flex-direction": "column" }}>
+    <div style={{ display: "flex", flexDirection: "column" }}>
       <div style={{ width: "300px" }}>
         A regular button:
         <Button buttonType={ButtonTypes.Primary} id="button-ex4" type="submit">

package/src/components/StyleGuide/Breakpoints.stories.mdx

@@ -28,20 +28,34 @@ import { getCategory } from "../../utils/componentCategories";
 
 The DS adheres to four global breakpoints for responsive layouts and typography.
 
-- Desktop: 1280px
-- Tablet Landscape: 960px
-- Tablet Portrait: 600px
 - Mobile: 320px
+- Tablet Portrait: 600px
+- Tablet Landscape: 960px
+- Desktop: 1280px
 
 ## CSS Variables
 
 The following CSS variables are available through the DS.
 
+```scss
+--nypl-breakpoint-small: 320px;
+--nypl-breakpoint-medium: 600px;
+--nypl-breakpoint-large: 960px;
+--nypl-breakpoint-xl: 1280px;
 ```
---breakpoint-xl: 1280px;
---breakpoint-large: 960px;
---breakpoint-medium: 600px;
---breakpoint-small: 320px;
+
+## SCSS Variables
+
+If you are using SCSS and imported the NYPL Design System `/dist/resources.scss`
+file, then you can use the following SCSS variables in your media queries or
+SCSS `breakpoint` function (if used).
+
+```scss
+$nypl-breakpoint-small: 320px;
+$nypl-breakpoint-medium: 600px;
+$nypl-breakpoint-large: 960px;
+$nypl-breakpoint-xl: 1280px;
+$nypl-max-width: $nypl-breakpoint-xl;
 ```
 
 ## Figma Reference

package/src/components/StyleGuide/Buttons.stories.mdx

@@ -27,8 +27,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
     },
   }}
 />
@@ -123,6 +122,7 @@ component. Note that the `SearchBar` type is only used internally in the
       <Button buttonType={ButtonTypes.Pill}>Pill Button</Button>
       <Button buttonType={ButtonTypes.Link}>Link Button</Button>
       <Button buttonType={ButtonTypes.SearchBar}>SearchBar Button</Button>
+      <Button buttonType={ButtonTypes.NoBrand}>NoBrand Button</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>
@@ -160,6 +160,11 @@ component. Note that the `SearchBar` type is only used internally in the
   to the `TextInput` component
 - Visual Treatment: rectangular, filled, no border radius on the left side
 
+### ButtonTypes.NoBrand
+
+- used in cases where there is no brand color
+- Visual Treatment: rectangular, filled with a black background
+
 ## Patterns
 
 - Buttons are blue by default.
@@ -169,6 +174,8 @@ component. Note that the `SearchBar` type is only used internally in the
   include an up arrow icon.
 - Previous and Next buttons should be set as `ButtonTypes.Secondary` and be
   wrapped in a `ButtonGroup`.
+- Only use the `ButtonTypes.NoBrand` style where there is no brand color. _This
+  should be rarely used._
 
 <Canvas>
   <DSProvider>

package/src/components/StyleGuide/DesignTokens.stories.mdx

@@ -0,0 +1,170 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta title={getCategory("Design Tokens")} />
+
+# Design Tokens
+
+| Table of Contents                                                                    |
+| ------------------------------------------------------------------------------------ |
+| 1. [What are Design Tokens?](#what-are-design-tokens)                                |
+| 2. [Why Use Design Tokens?](#why-use-design-tokens)                                  |
+| 3. [How to Use the NYPL Design Tokens](#figma-reference)                             |
+| 4. [Using NYPL Design Tokens in CSS](#using-nypl-design-tokens-in-css)               |
+| 5. [Using NYPL Design Tokens in Javascript](#using-nypl-design-tokens-in-javascript) |
+| 6. [NYPL Design Token Categories](#nypl-design-token-categories)                     |
+
+## What are Design Tokens?
+
+Design tokens are the style values that define a design system. These values can include, but may not be limited to, spacing, color, typography, breakpoints and object styles. Ultimately, these values are used to construct and maintain the components that make up our system.
+
+## Why Use Design Tokens?
+
+_"With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development."_ – Jina Bolton, Lead Designer for the Salesforce Design System
+
+Design tokens are a single source of truth when it comes to styles. They allow an organization to more easily build multiple applications – web and/or native – that feel and look the same without slowing down the development team.
+
+## How to Use the NYPL Design Tokens
+
+The NYPL design tokens are built into the NYPL Design System (the DS) and are offered in two formats for consumption: CSS variables and javascript data objects. To access either of these formats, the DS v0.25.2 or higher needs to be properly installed in a consuming React application.
+
+## Using NYPL Design Tokens in CSS
+
+If your app uses CSS or SCSS to handle styles, the DS creates standard CSS custom properties (e.g. variables) for consumption in your stylesheets. If the DS is properly installed, the CSS custom properties will be available for you to use. Nothing more needs to be done to your app.
+
+To assist with CSS scope isolation, all of the CSS custom properties created by the DS are prefixed with "nypl." Please see the examples below.
+
+```css
+--nypl-colors-brand-primary
+--nypl-colors-brand-secondary
+--nypl-fontSizes-sm
+--nypl-fontSizes-md
+--nypl-fontSizes-lg
+--nypl-fontSizes-xl
+--nypl-space-xxs
+--nypl-space-xs
+--nypl-space-s
+--nypl-space-m
+--nypl-space-l
+```
+
+The CSS custom properties are defined on the :root pseudo-class and should be implemented using standard CSS custom properties conventions.
+
+```css
+/* Property Declaration in the DS */
+:root {
+  --nypl-colors-brand-primary: #c60917;
+}
+
+/* Property Usage in Your Application */
+.custom-button {
+  background: var(--nypl-colors-brand-primary);
+}
+```
+
+## Using NYPL Design Tokens in Javascript
+
+If you would like to use CSS-in-JS styles in your React components, the `useNYPLTheme` hook will provide you with NYPL design token values. The hook depends on the `DSProvider` component and will not work properly outside of the `DSProvider` wrapper component.
+
+After importing and implementing the `DSProvider` wrapper component, as explained in the `DSProvider` section of the [DS Chakra UI](?path=/story/chakra-ui--page#dsprovider) document, your children components can use this hook function.
+
+```tsx
+import { useNYPLTheme } from "@nypl/design-system-react-components";
+const theme = useNYPLTheme();
+```
+
+The theme variable will be a javascript object containing the NYPL design token style values. This will allow you to use design token values in your components through CSS-in-JS.
+
+```tsx
+// theme
+{
+  breakpoints: { ... },
+  colors: {
+    brand: { ... },
+    section: { ... },
+    transparent: { ... },
+    ui: { ... },
+  },
+  fontSizes: { ... },
+  fontWeights: { ... },
+  fonts: { ... },
+  radii: { ... },
+  space: { ... },
+}
+```
+
+#### Using in DS Components
+
+The general rule of thumb is that DS components and the available variants should be used with the styles and variants as they are shown in Storybook, but there may be rare times when a component does require a modification. That said, if a DS component does need an updated style, first contact the Design System and UX teams about this update.
+
+If you receive approval to make a change in a consuming app, then you can add styles directly to the `additionalStyles` prop. For example, if the `Heading` component needs to render text in NYPL's "success primary" green color and add a bold font weight, then you can do the following:
+
+```tsx
+const theme = useNYPLTheme();
+
+// ...
+return (
+  <div>
+    <Heading
+      level={2}
+      additionalStyles={{
+        color: theme.colors.ui.success.primary,
+        fontWeight: theme.fontWeights.bold,
+      }}
+    >
+      Get a Digital Library Card Today in a Few Easy Steps
+    </Heading>
+  </div>
+);
+```
+
+IMPORTANT: At the moment, not all DS components have this prop or feature.
+
+#### Using in HTML Components
+
+For styling standard HTML elements, use the `style` attribute to add inline styles.
+
+```html
+<p style={{ color: theme.colors.ui.success.primary }}>
+  If you are 13 or older and live, work, attend school, or pay property
+  taxes in New York State, you can get a free digital library card right
+  now using this online form. Visitors to New York State can also use this
+  form to apply for a temporary card.
+</p>
+```
+
+#### Using in Styled Components
+
+For adding theme styles to styled-objects, use the theme object as a standard javascript variable.
+
+```tsx
+const CustomButton = styled.button`
+  background: ${theme.colors.brand.primary};
+`;
+```
+
+## NYPL Design Token Categories
+
+The DS design tokens are broken into the following categories:
+
+- [breakpoints](?path=/story/documentation-style-guide-breakpoints--page)
+- [colors](?path=/story/documentation-style-guide-colors--page)
+  - brand
+  - section
+  - transparent
+  - ui
+- radii
+- [spacing](?path=/story/documentation-style-guide-spacing--page)
+- [typography](?path=/story/documentation-style-guide-typography--page)
+  - font families
+  - font sizes
+  - font weights
+
+For details related to a specific category, please refer to the corresponding section in the Style Guide available in the DS Storybook.

package/src/components/Tabs/Tabs.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import {
   Box,
-  Tabs as ChakraTabs,
-  TabList,
   Tab,
+  TabList,
   TabPanels,
   TabPanel,
+  Tabs as ChakraTabs,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
@@ -63,7 +63,7 @@ const getElementsFromContentData = (data, useHash) => {
         "needed, consider other navigational patterns."
     );
   }
-  data.map((tab, index) => {
+  data.forEach((tab, index) => {
     let tempPanel;
     // For URL hash enabled tabs, we need to add a custom `onClick` to handle the URL hash.
     const tempTab = (
@@ -108,7 +108,7 @@ const getElementsFromChildren = (children) => {
     return {};
   }
 
-  children.map((child) => {
+  children.forEach((child) => {
     if (child.type === TabList || child.props.mdxType === "TabList") {
       tabs.push(child);
 
@@ -170,7 +170,7 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
     if (windowDimensions.width > 600) {
       goToStart();
     }
-  }, [windowDimensions.width]);
+  }, [goToStart, windowDimensions.width]);
   const previousButton = (
     <Button
       buttonType={ButtonTypes.Primary}

package/src/components/Template/Template.stories.mdx

@@ -507,10 +507,10 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
             imageAspectRatio={ImageRatios.Square}
             imageSize={ImageSizes.Small}
           >
-            <CardHeading level={HeadingLevels.Three} id="heading1">
+            <CardHeading level={HeadingLevels.Two} id="heading1">
               Small Animal Image
             </CardHeading>
-            <CardHeading level={HeadingLevels.Five} id="heading2">
+            <CardHeading level={HeadingLevels.Three} id="heading2">
               Animal info
             </CardHeading>
             <CardContent>
@@ -530,7 +530,7 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           backgroundColor="#616161"
           foregroundColor="#FFF"
         >
-          <CardHeading id="heading1" level={2}>
+          <CardHeading id="heading1-footer" level={HeadingLevels.Two}>
             Footer
           </CardHeading>
           <CardContent>
@@ -542,25 +542,25 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           </CardContent>
           <CardActions>
             <Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Facebook
             </Link>
             ,<Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Instagram
             </Link>,<Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Twitter
             </Link>

package/src/components/TextInput/TextInput.stories.mdx

@@ -38,7 +38,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.4`   |
 
 <Description of={TextInput} />
 

package/src/components/TextInput/TextInput.tsx

@@ -22,6 +22,8 @@ export interface InputProps {
   attributes?: { [key: string]: any };
   /** A class name for the TextInput parent div. */
   className?: string;
+  /** The starting value of the input field. */
+  defaultValue?: string;
   /** Populates the HelperErrorText for the standard state */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
@@ -37,6 +39,8 @@ export interface InputProps {
   /** Provides text for a `Label` component if `showLabel` is set to true;
    * populates an `aria-label` attribute if `showLabel` is set to false. */
   labelText: string;
+  /** Used to reference the input element in forms. */
+  name?: string;
   /** The action to perform on the `input`/`textarea`'s onChange function  */
   onChange?: (
     event:
@@ -53,6 +57,8 @@ export interface InputProps {
   /** Offers the ability to show the "Required"/"Optional" label onscreen or
    * hide it. True by default. */
   showOptReqLabel?: boolean;
+  /** The amount to increase or decrease when using the number type. */
+  step?: number;
   /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
   type?: TextInputTypes;
   /** Populates the value of the input/textarea elements */
@@ -78,6 +84,7 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
       additionalStyles = {},
       attributes = {},
       className,
+      defaultValue,
       helperText,
       id = generateUUID(),
       invalidText,
@@ -85,11 +92,13 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
       isInvalid = false,
       isRequired = false,
       labelText,
+      name,
       onChange,
       placeholder,
       showHelperInvalidText = true,
       showLabel = true,
       showOptReqLabel = true,
+      step = 1,
       type = TextInputTypes.text,
       value,
       variantType = TextInputVariants.Default,
@@ -132,16 +141,20 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
 
     // When the type is "hidden", the input element needs fewer attributes.
     options = isHidden
-      ? { id, "aria-hidden": isHidden, onChange, ref }
+      ? { id, "aria-hidden": isHidden, name, onChange, ref }
       : {
-          id,
           "aria-required": isRequired,
+          defaultValue,
+          id,
           isDisabled,
           isRequired,
           isInvalid,
           placeholder,
+          name,
           onChange,
           ref,
+          // The `step` attribute is useful for the number type.
+          step: type === TextInputTypes.number ? step : null,
           ...attributes,
         };
     // For `input` and `textarea`, all attributes are the same but `input`

package/src/components/TextInput/TextInputTypes.tsx

@@ -11,6 +11,7 @@ export enum TextInputTypes {
   url = "url",
 }
 
+// Only used internally in `TextInput`.
 export enum TextInputFormats {
   email = "jdoe@domain.com",
   hidden = "",
@@ -23,6 +24,7 @@ export enum TextInputFormats {
   url = "https://domain.com",
 }
 
+// Only used internally in `TextInput` and `SearchBar`.
 export enum TextInputVariants {
   Default = "default",
   SearchBar = "searchBar",

package/src/components/VideoPlayer/VideoPlayer.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -46,7 +45,7 @@ The `VideoPlayer` component is used to embed a `Vimeo` or `YouTube` video player
 
 The `aspectRatio` prop is used to control the sizing of the space allotted for the video rendering. Ultimately, the `aspectRatio` prop should be set to match the aspect ratio of the video that is being rendered. The default aspect ratio is `16:9`.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="VideoPlayer"
     args={{
@@ -72,7 +71,7 @@ The `aspectRatio` prop is used to control the sizing of the space allotted for t
       />
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="VideoPlayer" />
 

package/src/docs/Chakra.stories.mdx

@@ -87,8 +87,8 @@ wrap the elements in the `DSProvider` component.
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button disabled={false}>Enabled</Button>
-      <Button disabled={true}>Disabled</Button>
+      <Button isDisabled={false}>Enabled</Button>
+      <Button isDisabled>Disabled</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>

package/src/index.ts

@@ -16,6 +16,7 @@ export {
 } from "@chakra-ui/react";
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
+export { ColorVariants } from "./components/Breadcrumbs/BreadcrumbsTypes";
 export { default as Button } from "./components/Button/Button";
 export { ButtonTypes } from "./components/Button/ButtonTypes";
 export {
@@ -32,6 +33,7 @@ export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGro
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 export { default as DSProvider } from "./theme/provider";
+export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export { FormSpacing } from "./components/Form/FormTypes";
 export { GridGaps } from "./components/Grid/GridTypes";
@@ -46,11 +48,13 @@ export { HeroTypes } from "./components/Hero/HeroTypes";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";
 export {
+  IconAlign,
+  IconColors,
   IconNames,
-  LogoNames,
   IconRotationTypes,
-  IconColors,
   IconSizes,
+  IconTypes,
+  LogoNames,
 } from "./components/Icons/IconTypes";
 export { default as Image } from "./components/Image/Image";
 export {
@@ -69,18 +73,21 @@ export { default as Modal } from "./components/Modal/Modal";
 export { default as Notification } from "./components/Notification/Notification";
 export { NotificationTypes } from "./components/Notification/NotificationTypes";
 export { default as Pagination } from "./components/Pagination/Pagination";
+export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { RadioGroupLayoutTypes } from "./components/RadioGroup/RadioGroupLayoutTypes";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
+export { default as Select } from "./components/Select/Select";
 export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
 export {
   SkeletonLoaderImageRatios,
   SkeletonLoaderLayouts,
 } from "./components/SkeletonLoader/SkeletonLoaderTypes";
-export { default as Select } from "./components/Select/Select";
+export { default as Slider } from "./components/Slider/Slider";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
+export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
 export {
   Tabs,
   TabList,
@@ -88,8 +95,6 @@ export {
   TabPanels,
   TabPanel,
 } from "./components/Tabs/Tabs";
-export { default as Text } from "./components/Text/Text";
-export { TextDisplaySizes } from "./components/Text/TextTypes";
 export {
   TemplateAppContainer,
   Template,
@@ -101,7 +106,8 @@ export {
   TemplateContentSidebar,
   TemplateFooter,
 } from "./components/Template/Template";
-
+export { default as Text } from "./components/Text/Text";
+export { TextDisplaySizes } from "./components/Text/TextTypes";
 export {
   default as TextInput,
   TextInputRefType,

package/src/resources.scss

@@ -1,6 +1,6 @@
 // Resources to export as sass mixins
-@import "./styles/03-space/space-inline.scss";
-@import "./styles/03-space/space-inset.scss";
-@import "./styles/03-space/space-stack.scss";
-@import "./styles/base/02-breakpoints.scss";
-@import "./styles/base/03-mixins.scss";
+@import "./styles/base/01-breakpoints";
+@import "./styles/base/02-mixins";
+@import "./styles/space/space-inline";
+@import "./styles/space/space-inset";
+@import "./styles/space/space-stack";

package/src/styles/base/{_02-breakpoints.scss → _01-breakpoints.scss}

@@ -1,7 +1,6 @@
 /**
  * Breakpoint Configuration
  * @see https://github.com/Team-Sass/breakpoint/wiki
- *
  */
 
 // Global Breakpoints
@@ -12,17 +11,17 @@
 // Sass' breakpoint() mixin doesn't work without Sass variables.
 // CSS variables expose the breakpoint variables to consumers.
 :root {
-  --breakpoint-small: 320px;
-  --breakpoint-medium: 600px;
-  --breakpoint-large: 960px;
-  --breakpoint-xl: 1280px;
+  --nypl-breakpoint-small: 320px;
+  --nypl-breakpoint-medium: 600px;
+  --nypl-breakpoint-large: 960px;
+  --nypl-breakpoint-xl: 1280px;
 }
 
-$breakpoint-small: 320px;
-$breakpoint-medium: 600px;
-$breakpoint-large: 960px;
-$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.
-$max-width: $breakpoint-xl;
+$nypl-max-width: $nypl-breakpoint-xl;

package/src/styles/base/{_03-mixins.scss → _02-mixins.scss}

@@ -3,7 +3,7 @@
 
 /// Mixin - Clearfix.
 /// Adds clearfix based on http://bourbon.io/docs/#clearfix
-/// use example =   @include clearfix
+/// use example = @include clearfix
 
 @mixin clearfix {
   &::after {
@@ -29,10 +29,10 @@
 /// Outer container mixin for large screens
 @mixin wrapper(
   $container-max-width: $max-width,
-  $outer-container-break: $breakpoint-small,
+  $outer-container-break: $nypl-breakpoint-small,
   $v-margin: 0,
   $v-padding: 0,
-  $h-padding: var(--space)
+  $h-padding: var(--nypl-space-s)
 ) {
   margin: #{$v-margin} auto;
   max-width: #{$container-max-width};
@@ -41,12 +41,12 @@
 }
 
 .container {
-  @include space-inset-s;
+  padding: var(--nypl-space-s);
 }
 
 /// 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(--space)) {
+@mixin breakout($v-padding: var(--nypl-space-s)) {
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
 }
@@ -61,6 +61,17 @@
   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;