@nulogy/components

@nulogy/components

Built with React, compononents make it easy to create interfaces that conform to the principles of the Nulogy Design System. Components are styled-components written using styled-system. This makes it possible to write CSS directly in JS and pass props based on our design constraints.

Installation

npm install @nulogy/components --save

Usage

1. Wrap your appliction in our theme provider

Wrap your application in our ThemeProvider to access Nulogy's theme values and add typographic defaults.

import React from 'react'
import { ThemeProvider } from '@nulogy/components'

class App extends React.Component {
  render() {
    return (
      <ThemeProvider>
        // your application 
      </ThemeProvider>
    )
  }
}

2. Import desired components

import { Button } from '@nulogy/components'

const someView = {
  <Button>Click me</Button>
}

Please see the documentation for instructions on how best to use each component.

Changelog

11.0.0 (2024-11-07)

Bug Fixes

• correct the theme generator scale and types (8741ce1)
• do not shrink the toggle when put in a small container (#1450) (6b3b63f)
• format theme after generating it (039a996)
• issues with scaling up the theme (88d09bb)
• lint issues (6e7588f)
• lint issues (48e5ac6)
• make the icons and indicators in the select accessible (#1462) (3b6d900)
• preserve styled components composability (baa07de)
• prevent shrinking icon (d499bd1)
• remove obsolete stories (9dfe9ad)
• remove theme configuration panel (4317987)
• remove underlines from breadcrumbs (#1451) (6a68084)
• TypeScript parse error (31259ba)
• unexport the theme directly (38dda4b)
• visual defects following theme change (b7f5879)
• visual defects in the touch variant (6504bc4)

Code Refactoring

• removes old NavBar (d8f3bf6)

Features

• add a touch variant (7532270)
• allow adding left and right icons to the input (bfdfa88)
• generate the theme based on a base unit (414c19a)
• refactor away from size to variant (7fb639a)
• support tablet and phone media queries (aa06d15)
• update theme (e6ce943)

BREAKING CHANGES

• removes the old unused NavBar component that was replaced with the BrandedNavBar
• removes the icon and iconSize props from the input in-favor of iconLeft, iconRight, iconRightSize, iconLeftSize

Migration:

• Replace icon prop with iconRight
• Replace iconSize prop with iconRightSize
• changes NDSProvider size prop to variant.

The size prop was originally used sparingly in some components like the Button and the Icon to resize those components.

It was later extended to make all interactive components large enough to be used on a touch screen, through changing the size prop directly or by passing a size prop to the NDSProvider globally.

With this change, we retain the use of the size prop for select components, and introduce a variant prop that can be passed either to individual components or the NDSProvider globally with the value of either desktop or touch.

• theme can no longer be imported from "@nulogy/components"

NDS is introducing context-specific default themes. Directly importing themes from NDS may result in using the wrong theme, causing conflicts between custom app themes, desktop, and touch variants.

Instead of importing the theme from NDS like so: import { theme } from "@nulogy/components", you can use and access the theme in one of the following ways:

• Inside styled components

const Example = styled.div(({ theme }) => ({
  marginLeft: theme.space.x3,
  marginBottom: theme.space.x1,
  color: theme.colors.darkBlue,
}));

• Inside components: using styled props

function Component(props: Props) {
  return (
    <Box ml="x3" mb="x1" color="darkBlue">
      {props.children}
    </Box>
  )
}

• Inside components: using useTheme()

import { useTheme } from "styled-components"

function getPaddingBasedOnSomeProp(foo, theme) { ... }

function Component(props: Props) {
  const theme = useTheme()
  const horizontalPadding = getPaddingBasedOnSomeProp(props.foo, theme)

  return (
    <Box px={horizontalPadding}>
      {props.children}
    </Box>
  )
}