Feat: [OV-43444] Metric initial release (#452)

* Feat: [OV-43444] Metric initial release

* Update packages/Metric/src/metric.scss - remove space

Co-authored-by: Franck Gaudin <franck.gaudin@gsoft.com>

* Update packages/Metric/src/metric.scss - remove space

Co-authored-by: Franck Gaudin <franck.gaudin@gsoft.com>

* Update packages/Metric/src/metric.scss - remove space

Co-authored-by: Franck Gaudin <franck.gaudin@gsoft.com>

---------

Co-authored-by: Franck Gaudin <franck.gaudin@gsoft.com>

.changeset/spicy-insects-behave.md

@@ -0,0 +1,5 @@
+---
+'@igloo-ui/metric': minor
+---
+
+The initial release of the metric component

packages/Metric/.npmignore

@@ -0,0 +1 @@
+src/

packages/Metric/README.md

@@ -0,0 +1,44 @@
+# Metric
+
+A metric component is a button that visually represents a specific metric or measurement. It provides a concise and interactive way for users to access important information or track key performance indicators.
+
+<Example is="custom" />
+
+<ReferenceLinks is="custom" />
+
+## Installation
+
+To install `@igloo-ui/metric` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install @igloo-ui/metric
+```
+
+If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:
+
+```bash
+yarn add @igloo-ui/metric
+```
+
+## Usage
+
+Then to use the component in your code just import it!
+
+```jsx
+import Metric from '@igloo-ui/metric';
+import Wellness from '@igloo-ui/icons/dist/Wellness';
+
+const [selected, setSelected] = React.useState(false);
+const handleOnPress = () => {
+ setSelected(!selected);
+};
+
+<Metric
+ value={20}
+ variation={3}
+ label="Metric Name"
+ icon={<Wellness size="medium" />}
+ onPress={handleOnPress}
+ appearance={selected ? 'selected' : 'positive'}
+/>;
+```

packages/Metric/jest.config.js

@@ -0,0 +1,8 @@
+const base = require('../../jest.config');
+const { name } = require('./package.json');
+
+module.exports = {
+ ...base,
+ name,
+ displayName: name,
+};

packages/Metric/package.json

@@ -0,0 +1,37 @@
+{
+ "name": "@igloo-ui/metric",
+ "version": "0.0.0",
+ "main": "dist/Metric.js",
+ "module": "dist/Metric.js",
+ "types": "dist/Metric.d.ts",
+ "styles": "dist/metric.css",
+ "publishConfig": {
+ "access": "public"
+ },
+ "repository": "git+https://github.com/gsoft-inc/ov-igloo-ui.git",
+ "author": "Officevibe Inc.",
+ "contributors": [
+ "Vicky Comeau vicky.comeau@gsoft.com"
+ ],
+ "license": "Apache-2.0",
+ "peerDependencies": {
+ "react": ">= 16.8.6"
+ },
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "build": "rollup -c rollup.config.js"
+ },
+ "dependencies": {
+ "@igloo-ui/icons": "^1.6.0",
+ "@igloo-ui/tokens": "^2.0.0",
+ "classnames": "^2.3.2",
+ "react-aria": "^3.22.0"
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "IE >= 11"
+ ]
+}

packages/Metric/rollup.config.js

@@ -0,0 +1,6 @@
+import * as pkg from './package.json';
+import { createRollupConfig } from '../../rollup.config.js';
+
+const { name } = pkg;
+
+export default [createRollupConfig(name)];

packages/Metric/src/Metric.stories.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+
+ import { Meta, StoryObj } from '@storybook/react';
+
+ import Wellness from '@igloo-ui/icons/dist/Wellness';
+ import WellnessSolid from '@igloo-ui/icons/dist/WellnessSolid';
+
+ import Section from '@components/section';
+ import readme from '../README.md';
+
+ import Metric from './Metric';
+
+ export default {
+ title: 'Components/Metric',
+ component: Metric,
+ parameters: {
+ docs: {
+ description: {
+ component: readme,
+ }
+ }
+ },
+ argTypes: { 
+ icon: { control: { type: null } },
+ }
+ } as Meta<typeof Metric>;
+
+ type Story = StoryObj<typeof Metric>;
+
+ export const Overview: Story = {
+ render: (props) => {
+ const [selected, setSelected] = React.useState(false);
+ const handleOnPress = () => {
+ setSelected(!selected);
+ };
+
+ return (
+ <Metric
+ {...props}
+ onPress={handleOnPress}
+ appearance={selected ? 'selected' : 'positive'}
+ />
+ );
+ },
+ args: {
+ value: 20,
+ variation: 3,
+ label: 'Metric name',
+ icon: <Wellness size="medium" />,
+ },
+ };
+
+ export const Tooltip: Story = {
+ args: {
+ value: 20,
+ variation: 3,
+ label: 'Metric name',
+ appearance: 'positive',
+ icon: <Wellness size="medium" />,
+ tooltip: 'This is a tooltip',
+ },
+ };
+
+ export const Empty: Story = {
+ render: () => {
+ return (
+ <Section>
+ <Metric
+ value={0}
+ variation={0}
+ label="Empty"
+ icon={<Wellness size="medium" />}
+ />
+ <Metric
+ variation={0}
+ label="Fluctuate Zero"
+ type="fluctuate"
+ icon={<Wellness size="medium" />}
+ />
+ </Section>
+ );
+ }
+ };
+
+ export const Score: Story = {
+ render: () => {
+ return (
+ <Section>
+ <Metric
+ value={20}
+ variation={3}
+ label="Positive"
+ appearance="positive"
+ icon={<Wellness size="medium" />}
+ type="score"
+ />
+ <Metric
+ value={20}
+ variation={-20}
+ label="Negative"
+ appearance="negative"
+ icon={<Wellness size="medium" />}
+ type="score"
+ />
+ <Metric
+ value={20}
+ variation={3}
+ label="Selected"
+ appearance="selected"
+ icon={<WellnessSolid size="medium" />}
+ type="score"
+ />
+ </Section>
+ );
+ },
+ };
+
+ export const SubMetric: Story = {
+ render: () => {
+ return (
+ <Section>
+ <Metric
+ value={20}
+ variation={3}
+ label="Positive"
+ appearance="positive"
+ type="subMetric"
+ />
+ <Metric
+ value={20}
+ variation={-20}
+ label="Negative"
+ appearance="negative"
+ type="subMetric"
+ />
+ <Metric
+ value={20}
+ variation={3}
+ label="Selected"
+ appearance="selected"
+ type="subMetric"
+ />
+ </Section>
+ );
+ },
+ };
+
+ export const Fluctuate: Story = {
+ render: () => {
+ return (
+ <Section>
+ <Metric
+ value={20}
+ variation={3}
+ label="Positive"
+ appearance="positive"
+ type="fluctuate"
+ />
+ <Metric
+ value={20}
+ variation={-20}
+ label="Negative"
+ appearance="negative"
+ type="fluctuate"
+ />
+ </Section>
+ );
+ },
+ };