UX OBSIDIAN

A React component library for Logitech UI's and color variable sets.

How to get this package running locally

npm start

How to install it as part as your package

npm install @logitech/ux-obsidian --save

Component list:

• LogitechLogo
• Slider
• CheckBox
• StatusIcon
• Toggle
• ChevronCircle
• InfoIcon

LogitechLogo

import {
  LogitechLogo,
} from '@logitech/ux-obsidian';

export default class YourComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <LogitechLogo
        color="pink"
        width={400}
      />
    );
  }
}

Props

• color (optional) - string (default 'black')
• width (optional) - number (default 146)

Slider

import {
  Slider,
} from '@logitech/ux-obsidian';

export default class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    sliderValue: 50,
  }

  render() {
    return (
      <Slider
        dark
        value={this.state.sliderValue}
        onChange={(evt) => {
          this.setState({ sliderValue: evt.target.value });
        }}
      />
    );
  }
}

Props

• dark (optional) - boolean
• leftColor (optional) - string
• rightColor (optional) - string
• thumbColor (optional) - string
• value - string (0 > 100)
• onChange - function

CheckBox

import {
  CheckBox,
} from '@logitech/ux-obsidian';

export default class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    selected: false,
  }

  render() {
    return (
      <CheckBox
        dark
        selected={this.state.selected}
        onClick={() => {
          this.setState({ selected: !this.state.selected });
        }}
      />
    );
  }
}

Props

• selected - boolean
• onClick - function
• dark (optional) - boolean

StatusIcon

import {
  StatusIcon,
} from '@logitech/ux-obsidian';

export default class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    iconStatus: 'ok',
  }

  render() {
    return (
      <StatusIcon
        dark
        status={this.state.iconStatus}
      />
    );
  }
}

Props

• status - string ('ok', 'error', 'update', 'updating')
• dark (optional) - boolean
• updateStatus - number (0 > 100)

Toggle

import {
  Toggle,
} from '@logitech/ux-obsidian';

export default class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toggleSelection: false,
    };
  }

  render() {
    return (
      <div>
        <Toggle
          dark
          selected={this.state.toggleSelection}
          onClick={() => {
            this.setState({ toggleSelection: !this.state.toggleSelection })
          }}
        />
      </div>
    );
  }
}

Props

• selected - boolean
• onClick - function
• dark (optional) - boolean

ChevronCircle

import {
  ChevronCircle,
} from '@logitech/ux-obsidian';

export default class YourComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <ChevronCircle
          dark
          direction="right"
          onClick={() => {
            console.log('do something');
          }}
        />
      </div>
    );
  }
}

Props

• onClick (optional) - function
• dark (optional) - boolean
• direction (optional) - string ('up', 'right', 'down', 'left') - default ('right')
• dissabled (optional) - boolean
• background (optional) - string
• color (optional) - string

InfoIcon

import {
  InfoIcon,
} from '@logitech/ux-obsidian';

export default class YourComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <InfoIcon
        color="pink"
        width={50}
      />
    );
  }
}

Props

• color (optional) - string (default 'black')
• width (optional) - number (default 146)

How to use color variables from the package

@import '~@logitech/ux-obsidian/src/styles/variables.scss';

Color variables

• PRIMARY

• azzuro: '#00B8FC',

• ciano: '#00EAD0',

• kirsche: '#FF2947',

• lila: '#814EFA',

• electrico: '#DCFD00',

• helios: '#FF7F2C',

• NEUTRALS

• kohle: '#2F3132',

• cemento: '#6F7678',

• acier: '#C3C6C8',

• grigio: '#E1E2E3',

• marin: '#F4F4F4',

• white: '#FFFFFF',

• SYSTEM

• success: '#55D464',

• warning: '#FFA414',

• error: '#DC4949',

• scrim: '#000000',

Publishing to NPM

How to publish a new npm version

Add your commit, run the linter npm run lint, verify your code or better have someone verify your code, commit your code and then:

npm version patch
npm publish
git push origin master

Changelog

v0.0.20

• 22/06/2018 - Added leftColor, rightColor, and thumbColor props to the Slider component.

v0.0.19

• 22/06/2018 - NPM security audit.

v0.0.17

• 22/06/2018 - Swapped prop order

v0.0.16

• 21/06/2018 - Added style as props
• 21/06/2018 - Updated color schemes to reflect dark and white
• 21/06/2018 - Updated ChevronCircle to be able to pass style through
• 21/06/2018 - Updated colors to reflect obsidian style guides

v0.0.15

• 18/06/2018 - Updated the StatusIcon props and visuals.

v0.0.14

• 18/06/2018 - Added InfoIcon Component.

v0.0.13

• 13/06/2018 - Added to ChevronCircle Component a color, and background prop to change the desired colors.

v0.0.12

• 13/06/2018 - Added to ChevronCircle Component a dissabled prop

v0.0.11

• 13/06/2018 - Added LogitechLogo Component

v0.0.10

• 4/06/2018 - Added Slider Component

v0.0.8

• 1/06/2018 - Added CheckBox Component
• 1/06/2018 - Added ChevronCircle Component

v0.0.2

• 30/05/2018 - Created StatusIcon Component
• 30/05/2018 - Added instruction for Toggle Component
• 24/05/2018 - Added SASS for simpler variable exportation
• 24/05/2018 - Switching to Webpack

v0.0.1

• 23/05/2018 - Toggle element

Appendix

• https://medium.com/@_alanbsmith/building-a-react-component-library-part-1-d8a1e248fe6c
• https://docs.npmjs.com/private-modules/intro and retrofitted
• https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce