Merge pull request #699 from glints-dev/feature/foundations-icon

Add new icons and Icon component

Author: ninariccimarie

.github/workflows/cicd.yml

@@ -12,8 +12,8 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
-          cache: "yarn"
+          node-version: '16'
+          cache: 'yarn'
       - name: Install dependencies
         run: yarn install --prefer-offline
       - name: Build
@@ -34,10 +34,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
-          cache: "yarn"
+          node-version: '16'
+          cache: 'yarn'
       - name: Install dependencies
         run: yarn install --prefer-offline
+      - name: Build Icons
+        run: yarn build:next:icon
       - name: Build storybook
         run: yarn storybook:build:test
       - name: Run Playwright tests
@@ -61,10 +63,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
-          cache: "yarn"
+          node-version: '16'
+          cache: 'yarn'
       - name: Install dependencies
         run: yarn install --prefer-offline
+      - name: Build Icons
+        run: yarn build:next:icon
       - name: Deploy to Chromatic
         uses: chromaui/action@v1
         with:

.gitignore

@@ -3,6 +3,7 @@ dist
 es
 lib
 src/General/Icon/components
+src/General/@next/Icon/components
 *.log
 .out
 .DS_Store

.storybook/main.js

@@ -9,4 +9,7 @@ module.exports = {
     './*.stories.mdx',
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  features: {
+    storyStoreV7: true,
+  },
 };

package.json

@@ -9,11 +9,12 @@
     "node": "^14 || ^16"
   },
   "scripts": {
-    "build": "npm run build:icon && npm run build:lib && npm run build:es && npm run build:ts",
+    "build": "npm run build:icon && npm run build:next:icon && npm run build:lib && npm run build:es && npm run build:ts",
     "build:lib": "rm -rf lib && babel src -d lib --extensions .ts,.tsx --ignore src/**/*.test.tsx,src/**/*.test.ts",
     "build:es": "rm -rf es && cross-env BABEL_ENV=es babel src -d es --extensions .ts,.tsx --ignore src/**/*.test.tsx,src/**/*.test.ts",
     "build:ts": "tsc --project tsconfig.declaration.json -d --declarationDir lib && tsc --project tsconfig.declaration.json -d --declarationDir es",
     "build:icon": "rm -rf src/General/Icon/components && babel-node --extensions .ts,.tsx src/Utils/Icon/generateIcons.ts && npm run format:icon",
+    "build:next:icon": "npx @svgr/cli --typescript --out-dir src/General/@next/Icon/components -- src/General/@next/Icon/icons",
     "format:icon": "prettier --write src/General/Icon/components/*.tsx",
     "imports": "babel-node --extensions .ts scripts/count-imports/index.ts",
     "lint": "npm run lint:css && npm run lint:ts",
@@ -62,6 +63,7 @@
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
+    "@svgr/cli": "^6.5.1",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^11.2.7",

src/@next/index.ts

@@ -1,11 +1,19 @@
-export { Typography } from '../General/@next/Typography';
-
 export {
   Button,
   OutlineButton,
   DestructiveButton,
   OutlineMonochromeButton,
   PrimaryButton,
 } from '../General/@next/Button';
-
 export { ButtonGroup } from '../General/@next/ButtonGroup';
+export { Icon } from '../General/@next/Icon';
+export { Typography } from '../General/@next/Typography';
+
+// Utilities
+import * as Breakpoints from '../Utils/@next/breakpoints';
+import * as BorderRadius from '../Utils/@next/borderRadius';
+import * as Colors from '../Utils/@next/colors';
+import * as DropShadow from '../Utils/@next/dropShadow';
+import * as Fonts from '../Utils/@next/fonts';
+import * as Spacing from '../Utils/@next/spacing';
+export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };

src/General/@next/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Typography from '../Typography';
+import { Typography } from '../Typography';
 import { BasicButton } from './ButtonStyle';
 
 export type ButtonSize = 'default' | 'slim' | 'large';

src/General/@next/Button/ButtonStyle.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import styled from 'styled-components';
-import { Breakpoints } from '../../..';
+import * as Breakpoints from '../../../Utils/@next/breakpoints';
 import { borderRadius4 } from '../../../Utils/@next/borderRadius';
 import { Neutral } from '../../../Utils/@next/colors';
 import {

src/General/@next/Icon/Icon.stories.mdx

@@ -0,0 +1,78 @@
+import { Meta } from '@storybook/addon-docs';
+import { iconNames } from './icons/icons';
+import { Typography } from '../Typography'
+import { StyledIcon, StyledItemList, StyledUnorderedList } from './IconStoriesStyles'
+import { Icon } from './Icon';
+import * as Colors from '../../../Utils/@next/colors';
+
+<Meta title="General/@next/Icon" />
+
+# Icons
+
+<StyledUnorderedList>
+  {iconNames.map((name) =>
+    <StyledItemList key={name}>
+      <StyledIcon name={name} height={28}/>
+      <Typography variant='subtitle2'>{name}</Typography>
+    </StyledItemList>
+  )}
+</StyledUnorderedList>
+
+## How to use
+- import NIcon component from glints-aries and pass name prop to use the specific icon
+
+<div style={{ display: 'flex' }}>
+  <StyledIcon name="ri-account-circle-fill" height={48}/>
+  <Typography variant='subtitle2'>ri-account-circle-fill</Typography>
+</div>
+
+```ts
+import { NIcon as Icon } from 'glints-aries';
+
+export const MyComponent = () => (
+  <Icon name="ri-account-circle-fill" />
+);
+```
+
+### Color
+- you can change the color of the icon by passing the color to `fill` prop.
+
+<StyledIcon name="ri-account-circle-fill" height={48} fill={Colors.Blue.Brand} />
+
+```
+Import { Colors } from 'glints-aries'
+
+<Icon name="ri-account-circle-fill" height={48} fill={Colors.Blue.Brand} />
+```
+
+### Size
+- you can change the size of the icon by either passing a height or width as **props** or using **styles**.
+- passing at least either the `height` or `width` automatically sets the other with the same value.
+#### Props
+- Passing height or width as props
+```ts
+<Icon name="ri-account-circle-fill" height={48} />
+```
+
+#### Style
+- Resizing by specifying height or width in styles
+```ts
+import { NIcon as Icon } from 'glints-aries';
+import styled from 'styled-components';
+
+const StyledIcon = styled(Icon)`
+  height: '48px';
+`;
+
+export const MyComponent = () => (
+  <StyledIcon name="ri-account-circle-fill" />
+);
+```
+
+## Adding new icons
+1. Add svg file to `src/General/@next/Icon/icons`
+  - make sure only viewBox is defined. Remove height, width or fill. This is to make sure the generated React component generates correct props for styles to work. 
+2. Generate SVG React Component. Run `yarn build`. Components can be found in `src/General/@next/Icon/components`
+3. Update `src/General/@next/Icon/icons/icons.ts` file.
+  - insert the new icon's name to `iconNames` in alphabetical order. Refer to Iconography naming convention.
+  - update `iconsMappingComponent` with it's corresponding component name.

src/General/@next/Icon/Icon.test.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import 'jest-styled-components';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import * as Blue from '../../../Utils/@next/colors/blue';
+
+import { Icon } from './Icon';
+import styled from 'styled-components';
+
+describe('<Icon />', () => {
+  const iconName = 'ri-account-circle-fill';
+
+  test('resize based on passed height prop', () => {
+    const height = 24;
+    render(<Icon name={iconName} height={height} />);
+
+    const svg = document.querySelector('svg');
+
+    expect(svg).toHaveStyle({ height });
+  });
+
+  test('resize based on passed height from styled-component', () => {
+    const customStyle = 'height: 24px';
+    const StyledIcon = styled(Icon)`
+      ${customStyle}
+    `;
+    render(<StyledIcon name={iconName} />);
+
+    const svg = document.querySelector('svg');
+
+    expect(svg).toHaveStyle(customStyle);
+  });
+
+  test('renders color based on fill prop', () => {
+    render(<Icon name={iconName} height={24} fill={Blue.Brand} />);
+    const svg = document.querySelector('svg');
+
+    expect(svg).toHaveAttribute('fill', Blue.Brand);
+  });
+});

src/General/@next/Icon/Icon.tsx

@@ -0,0 +1,11 @@
+import React, { SVGProps } from 'react';
+import { IconNames, iconNames, iconsMappingComponent } from './icons/icons';
+
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
+  name: IconNames;
+}
+
+export const Icon = ({ name, ...props }: IconProps) => {
+  const IconComponent = iconsMappingComponent[name as typeof iconNames[number]];
+  return <IconComponent {...props} />;
+};