Foundations

The following sections are detailed below:

• Typography
• Grid
• Icons
• Design Tokens

Foundations

Typography

fetch https://storybook-harmony.ofp-elr.optum.com/?path=/docs/foundations-typography--docs&e2e=1&globals=viewport:mastheadSidebar275 to review the typography documentation and examples. The Harmony React library provides a set of typography components that allow you to apply consistent text styles across your application. These components include various heading levels, body text, captions, and more, all of which can be customized using design tokens for colors, spacing, and font sizes.

Typography components provides a standardized approach to text styling. It ensures consistent typography across different devices and screen sizes, enhancing readability and aesthetics

import { FC } from 'react';
import { Text, TextProps } from '@uhg-harmony/react';
import styled, { css } from 'styled-components';

const Background = styled.div`
  ${({ theme }) => css`
    padding: ${theme.HarmonySemanticSpacingXs};
    background: ${theme.HarmonyButtonColorPrimaryRest};
  `}
`;

export const BasicExample: FC = ({ className, weight, inverse, size, italic, as }: TextProps) => (
  <>
    <Text className={className} weight={weight} size={size} italic={italic} as={as}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod pellentesque elit vel mollis.
    </Text>
    <Background>
      <Text inverse={inverse} weight={weight} size={size} italic={italic} as={as}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod pellentesque elit vel mollis.
      </Text>
    </Background>
  </>
);

Grid

fetch https://storybook-harmony.ofp-elr.optum.com/?path=/docs/foundations-grid--docs&e2e=1&globals=viewport:mastheadSidebar275 to understand the grid documentation and examples. The Harmony React library provides a flexible grid system that allows you to create responsive layouts with ease. The grid consists of a container, rows, and columns, which can be customized to fit your application's needs.

Harmony React provides a separate grid library which can be consumed by applications. The grid consists of a container, rows and columns. The rows contain gutters (padding) that can be removed. Columns are children of rows. The columns can be equal width, span across all breakpoints and specific breakpoints.

In order to use the grid you just need to set the boolean grid prop on the Harmony wrapper component. This will expose the spacing utility classes to all components wrapped by the Harmony component.

import { FC } from 'react';
import { GridDescription, StoryWrapper } from './GridDescription';

export const EqualWidthExample: FC = () => (
  <>
    <GridDescription />
    <StoryWrapper>
      <div className="grid">
        <div className="row">
          <div className="col">
            <div className="demo-content">Full width</div>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="demo-content">1/2</div>
          </div>
          <div className="col">
            <div className="demo-content">1/2</div>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="demo-content">1/3</div>
          </div>
          <div className="col">
            <div className="demo-content">1/3</div>
          </div>
          <div className="col">
            <div className="demo-content">1/3</div>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="demo-content">1/4</div>
          </div>
          <div className="col">
            <div className="demo-content">1/4</div>
          </div>
          <div className="col">
            <div className="demo-content">1/4</div>
          </div>
          <div className="col">
            <div className="demo-content">1/4</div>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="demo-content">1/6</div>
          </div>
          <div className="col">
            <div className="demo-content">1/6</div>
          </div>
          <div className="col">
            <div className="demo-content">1/6</div>
          </div>
          <div className="col">
            <div className="demo-content">1/6</div>
          </div>
          <div className="col">
            <div className="demo-content">1/6</div>
          </div>
          <div className="col">
            <div className="demo-content">1/6</div>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
          <div className="col">
            <div className="demo-content">1/12</div>
          </div>
        </div>
      </div>
    </StoryWrapper>
  </>
);

Icons

fetch https://storybook-harmony.ofp-elr.optum.com/?path=/docs/foundations-icons--docs&e2e=1&globals=viewport:mastheadSidebar275 to review the icons documentation and examples. The Harmony Icons package provides a comprehensive set of icons that can be used in your application. Each icon is available as a React component that can be easily imported and used in your code.

This story displays all available icons from the @uhg-harmony/icons-react package.

{
  render: () => {
    const theme = useContext(ThemeContext) as HarmonyTheme;
    return <div style={{
      display: 'flex',
      flexWrap: 'wrap'
    }}>
        {Object.keys(Icons).map(key => {
        const IconComponent = Icons[key as keyof typeof Icons];
        return <div key={key} style={{
          flex: '1 0 15%',
          margin: theme.HarmonySemanticSizingIconXs,
          textAlign: 'center',
          width: theme.HarmonyIconButtonSizingMinWidthL,
          padding: theme.HarmonySemanticSpacingL
        }}>
              <IconComponent style={{
            width: theme.HarmonySemanticSizingXl,
            height: theme.HarmonySemanticSizingXl,
            color: theme.HarmonySemanticColorBrandPrimary
          }} />
              <p style={{
            wordWrap: 'break-word',
            fontSize: theme.HarmonySemanticFontSizeM
          }}>{key}</p>
            </div>;
      })}
      </div>;
  },
  parameters: {
    docs: {
      description: {
        story: 'The name of the import you need to use is located just beneath the icon.'
      }
    }
  }
}

Design Tokens

fetch https://storybook-harmony.ofp-elr.optum.com/?path=/story/foundations-design-tokens--overview&e2e=1&globals=viewport:mastheadSidebar275 to review the design tokens documentation and examples. Design tokens are the fundamental elements of all UI components. These tokens are consistently utilized across designs, tools, and codebases.

Harmony Design Tokens are the fundamental elements of all UI components. These tokens are consistently utilized across designs, tools, and codebases.

Design tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:

"Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development."– Salesforce UX

Tokens represent style attributes such as colors, fonts, and dimensions.

Utilize design tokens instead of fixed values.

Each token is named based on its function or location.

harmony.accordion.color.heading