@redsift/icons 6.3.0 → 7.0.0-alpha.0

package/CONTRIBUTING.md

@@ -5,18 +5,28 @@
 Make sure you have the following requirements installed: [node](https://nodejs.org/) (v16+) and [yarn](https://yarnpkg.com/en/) (v1.22.0+)
 
 Clone the repo (or fork it first if you're not part of Red Sift organization).
+
 ```
 git clone git@github.com:redsift/design-system.git
 cd design-system
 yarn install
 ```
 
+Set up your environment variable file by copying the template file:
+
+```bash
+cp .env.template .env
+```
+
+Then edit the `.env` file with the correct values. NEVER commit the `.env` file directly or any secrets and credentials it might contain.
+
 You can then run the storybook and browse to [http://localhost:9000](http://localhost:9000) with:
+
 ```bash
 yarn start:storybook
 ```
 
-#### Architecture
+### Architecture
 
 The Design System is following a monorepo architecture, providing multiple packages based on different use cases.
 
@@ -46,7 +56,7 @@ The Design System is following a monorepo architecture, providing multiple packa
 
 Please make sure to work inside the correct package when making contribution.
 
-#### Shared code
+### Shared code
 
 If you need something inside more than one package, do not duplicate the code. Place it inside one package, export it from this package and import it inside the others.
 
@@ -65,7 +75,7 @@ import { PieChart, PieChartVariant } from '@redsift/dashbord';
 
 To define which package should contain the shared code, select the one that would not create any circular dependencies.
 
-#### Dependencies
+### Dependencies
 
 We try to use as few dependencies as possible.
 
@@ -83,7 +93,7 @@ import * as d3 from 'd3';
 import { sum, scaleOrdinal } from 'd3';
 ```
 
-#### Scaffolding
+### Scaffolding
 
 Each component should be in its own folder. If a subcomponent can be used as a standalone component, it should be in its own folder too. For instance, `CheckboxGroup` uses `Checkbox` but `Checkbox` can be used alone. In this case, `CheckboxGroup` and `Checkbox` both have their own folder. For `PieChart` and `PieChartSlice`, a `PieChartSlice` can not be used alone. It only exists inside a `PieChart` component. Therefore, both components are inside the same folder.
 
@@ -122,36 +132,43 @@ const DEFAULT_PROPS: Partial<BadgeProps> = {
 /**
  * The Badge component.
  */
-export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {
-  const {
-    // props
-    ...forwardedProps
-  } = props;
-
-  return (
-    <StyledBadge
-      {...forwardedProps}
-      // transient props
-      className={classNames(Badge.className, `${Badge.className}-${variant}`, className)}
-      ref={badgeRef as RefObject<HTMLDivElement>}
-    >
-      // content of the component if needed
-    </StyledBadge>
-  );
-});
+export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef(
+  (props, ref) => {
+    const {
+      // props
+      ...forwardedProps
+    } = props;
+
+    return (
+      <StyledBadge
+        {...forwardedProps}
+        // transient props
+        className={classNames(
+          Badge.className,
+          `${Badge.className}-${variant}`,
+          className
+        )}
+        ref={ref as RefObject<HTMLDivElement>}
+      >
+        // content of the component if needed
+      </StyledBadge>
+    );
+  }
+);
 Badge.className = CLASSNAME;
 Badge.defaultProps = DEFAULT_PROPS;
 Badge.displayName = COMPONENT_NAME;
 ```
 
 The main things to keep in mind here are:
+
 - to use the custom `Comp` type,
 - to forward ref and props,
 - to concatenate classNames,
 - to define default values and
 - to use types from `types.ts` and styles from `styles.ts`.
 
-#### API
+### API
 
 The API of the components should be consistent with other components.
 
@@ -167,22 +184,25 @@ height?: number;
 width?: number;
 
 // do
-size?: ButtonSize;
+size?: PieChartSize;
 ```
 
 To know how to define your API, to name and document your props, take a look at the existing components.
 
-### Tests
+## Tests
+
 We use [jest](https://jestjs.io/) for unit tests and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) for rendering and writing assertions. We also use [Storyshots](https://storybook.js.org/addons/@storybook/addon-storyshots) to automatically take a code snapshot of every story.
 
 Please make sure you include tests with your pull requests. Our CI will run the tests on each PR. A minimum of 90% code coverage is required for statements, branches, functions and lines of every package. However, in practice, we try to reach a 100% code coverage.
 
 We split the tests into 2 groups.
 
-*Visual tests*
+_Visual tests_
+
 - A Storybook story should be written for each visual state that a component can be in (based on props).
 
-*Unit tests*
+_Unit tests_
+
 - (Props) Anything that should be changed by a prop should be tested via react-testing-library.
 - (Events) Anything that should trigger an event should be tested via react-testing-library.
 
@@ -195,16 +215,18 @@ yarn test
 Or for a specific package with:
 
 ```bash
-yarn test:design-system
 yarn test:charts
+yarn test:design-system
 yarn test:dashboard
+yarn test:table
 ```
 
 Do not forget to update the snapshots with the `-u` option when you modify or create stories. However, you should **always** check the generated snapshots to see if they are correct. Do **not** blindly update the snapshots.
 
-### Linting
+## Linting
 
 The code is linted with [eslint](https://eslint.org/). You can run the linter with:
+
 ```bash
 yarn lint
 ```
@@ -218,9 +240,10 @@ yarn lint:design-system
 yarn lint:table
 ```
 
-### TypeScript
+## TypeScript
 
 The code is written in [TypeScript](https://www.typescriptlang.org/). The type checker will usually run in your editor, but also runs when you run:
+
 ```bash
 yarn check-types
 ```
@@ -271,7 +294,7 @@ export type BadgeVariant = ValueOf<typeof BadgeVariant>;
 
 The variants, colors and all other enum-based interfaces should be implemented exactly as above to make the property compatible with both the enum values and their string equivalent values. In this example, `BadgeVariant.standard` and `"standard"` are both valid values for the `variant` prop.
 
-### Styling
+## Styling
 
 We use [styled-components](https://styled-components.com/) and [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for styling. CSS variables are centralized through a [style dictionary](https://amzn.github.io/style-dictionary/#/).
 
@@ -282,18 +305,21 @@ The `styles.ts` of a component should contain all the styled-component codes. At
  * Component style.
  */
 export const StyledBadge = styled.div<StyledBadgeProps>`
-  ${({ $color }) => $color ? css`
-    color: var(--redsift-color-${$color}-contrast);
-    background-color: var(--redsift-color-${$color}-main);
-  ` : ''}
-`
+  ${({ $color }) =>
+    $color
+      ? css`
+          color: var(--redsift-color-neutral-white);
+          background-color: var(--redsift-color-${$color}-primary);
+        `
+      : ''}
+`;
 ```
 
 Make sure you are using the same HTML element for the styled component (i.e. `styled.div`) and the type interface (i.e. `ComponentProps<'div'>`). Type your variable with the interface you created in the `types.ts` file.
 
 Make sure to use only [transient props](https://styled-components.com/docs/api#transient-props) and to use the styled-component's `css` helper when conditionnaly creating a new CSS block.
 
-### Accessibility
+## Accessibility
 
 We are trying to make the Design System as accessible as possible by following the [Web Accessibility Initiative guidelines](https://www.w3.org/WAI/ARIA/apg/).
 
@@ -301,7 +327,8 @@ Before implementing a component, try to see if there is a [pattern](https://www.
 
 However, before using any ARIA, [read this disclaimer carefully](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/).
 
-### Storybook
+## Storybook
+
 We use [Storybook](https://storybooks.js.org) for local development. Run the following command to start it:
 
 ```bash
@@ -314,7 +341,7 @@ You can use knobs and other storybook addons to create your stories. However, it
 
 Storybook is shared among every packages of the Design System. Follow the naming of the components that already exists in the same package to make sure it will appear in the correct section.
 
-### Documentation
+## Documentation
 
 We use a [Next.js](https://nextjs.org/) app with [MDX](https://mdxjs.com/) support as a documentation and demonstration site for the Design System. This app can be run as following:
 
@@ -329,6 +356,7 @@ To add documentation for a component, a MDX file should be created in the `packa
 To appear in the website's Side Panel, the page should be listed in `packages/website/components/CustomAppSidePanel/CustomAppSidePanel.tsx`) under the corresponding section.
 
 A component page should be structured as following:
+
 - **Introduction**
   - **Installation**: explains which package to install and how
   - **Usage**: explains how to import the component
@@ -357,9 +385,12 @@ To display a demo, first create a demo (a simple `tsx` file) in the demo folder
 To display simple code, use the `CodeBlock` as following:
 
 ```ts
-<CodeBlock codeString={`
+<CodeBlock
+  codeString={`
 yarn add @redsift/design-system
-`} language="sh" />
+`}
+  language="sh"
+/>
 ```
 
 ## Build

package/package.json

@@ -19,7 +19,7 @@
     "url": "git+https://github.com/redsift/design-system"
   },
   "sideEffects": false,
-  "version": "6.3.0",
+  "version": "7.0.0-alpha.0",
   "scripts": {
     "build": "rollup -c",
     "prepublishOnly": "yarn build"
@@ -48,5 +48,5 @@
     "rollup-plugin-ts-paths-resolve": "^1.7.1",
     "rollup-plugin-typescript-paths": "^1.3.1"
   },
-  "gitHead": "2c934b635a38eff689bc98eebdd3a2646a22a02f"
+  "gitHead": "49c0e4c8f8dad94eed4101fb388c62c95c7f4d69"
 }