Ny ikonpakke + ikonsøk (#1847)

.changeset/blue-lemons-cheat.md

@@ -0,0 +1,5 @@
+---
+"@navikt/aksel-icons": minor
+---
+
+Ny ikonpakke med for core icons 3! `@navikt/aksel-icons`

.changeset/config.json

@@ -6,12 +6,13 @@
     [
       "@navikt/ds-react",
       "@navikt/ds-css",
-      "@navikt/ds-icons",
       "@navikt/ds-tokens",
       "@navikt/ds-tailwind",
       "@navikt/ds-css-internal",
       "@navikt/ds-react-internal",
-      "@navikt/ds-codemod"
+      "@navikt/ds-codemod",
+      "@navikt/aksel-icons",
+      "@navikt/ds-icons"
     ]
   ],
   "linked": [],

.github/workflows/release.yml

@@ -65,3 +65,15 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_AUTOMATION }}
           GITHUB_TOKEN: ${{ secrets.GIT_REPO }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+
+      - name: Generate icon.zip
+        if: steps.changesets.outputs.published == 'true'
+        run: yarn zip:icons
+
+      - name: Upload updated icon.zip to NAV CDN
+        if: steps.changesets.outputs.published == 'true'
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./@navikt/aksel-icons/aksel-icons.zip
+          destination: "/icons/zip"

.storybook/intro.stories.mdx

@@ -4,7 +4,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 
 # Aksel, NAVs designsystem
 
-- [Dokumentasjon](https://aksel.nav.no/komponenter)
+[Dokumentasjon](https://aksel.nav.no/komponenter)
 
 ### Core
 
@@ -20,8 +20,10 @@ yarn add @navikt/ds-react-internal @navikt/ds-css-internal
 
 ### Ikoner
 
+[Dokumentasjon](https://aksel.nav.no/ikoner)
+
 ```bash
-yarn add @navikt/ds-icons
+yarn add @navikt/aksel-icons
 ```
 
 ### Bruk

@navikt/aksel-icons/.gitignore

@@ -0,0 +1,5 @@
+dist
+src
+svgtest
+core-icons
+*.zip

@navikt/aksel-icons/.svgrrc.js

@@ -0,0 +1,16 @@
+const template = require("./config/template");
+
+module.exports = {
+  typescript: true,
+  ref: true,
+  icon: true,
+  titleProp: true,
+  svgProps: {
+    focusable: false,
+    role: "img",
+  },
+  replaceAttrValues: {
+    "#262626": "currentColor",
+  },
+  template,
+};

@navikt/aksel-icons/CONTRIBUTING.md

@@ -0,0 +1,59 @@
+# Aksel icons - Bidrag
+
+## Foreslå nye ikoner
+
+Om du ikke finner et ikonet du leter etter kan du [åpne et issue på github](https://github.com/navikt/aksel/issues/new?labels=nytt+✨%2Cikoner+🖼%2Cforespørsel+🥰&template&template=new-icon.yaml&title=%5BNytt+ikon%5D%3A+).
+
+## Oppdatere ikon
+
+Hvis du tenker et ikon fortjener en oppdatering eller er utdatert kan [du foreslå det her.](https://github.com/navikt/aksel/issues/new?labels=forespørsel+🥰&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+)
+
+## Legge til nye ikoner selv
+
+Hvis du selv ønsker å legge til nye ikoner kan du kopiere filenes fra `/template` og legge de inn i `/icons` med egen data. Alle ikonene har naming-format `PascalCase`. Alle ikonene har 1 SVG-fil og 1 tilhørende YML-fil.
+
+### Svg
+
+- Sizing, width og height må være 24x24: `width="24" height="24" `
+- Viewbox: `viewBox="0 0 24 24"`
+- Fill på path: `fill="#262626"`
+
+### Yml
+
+```yml
+name: Template # Samme som filnavn
+category: Template category # Hovedkategori
+sub_category: Sub category # Underkategori
+keywords: # Samling med søkeord
+  - template1
+  - template2
+  - template3
+variant: Stroke # Stroke eller Fill
+updated_at: 02.01.2023 # Dato for siste oppdatering
+created_at: 01.01.2023 # Dato for opprettelse
+```
+
+### Publisere oppdatering
+
+Når du har lagt til nye ikoner kan du opprette en pull request. Denne vil bli automatisk testet og så gått gjennom av Aksel-teamet.
+Legg gjerne til en `changeset` ved å kjøre `yarn changeset` i terminalen. Dette vil gi oss bedre oversikt over hva som er endret i endringslogger og automatisk bumpe pakke-versjonen ved merge.
+
+#### Teste nytt ikon
+
+Hvis du ønsker å teste om alt stemmer, både i `svg` og `yml` før du lager en PR kan du kjøre `yarn && cd navikt/aksel-icons && yarn test` i terminalen lokalt.
+
+## Design av nye ikoner
+
+### Generelt
+
+- Designet følger Keyline-malen (under assets i figma-pakken).
+- Alle lag og grupper skal bruke `#262626` for stroke og fill.
+
+### Stroke (linje)
+
+- Ikonet må bestå av kun linjer
+- Linjene skal være 1.5px, center-aligned
+
+### Fill (fylt)
+
+- Ikoner hvor shapes kan fylles, bør fylles

@navikt/aksel-icons/README.md

@@ -0,0 +1,64 @@
+# Aksel icons
+
+800+ open source icons made by Aksel, NAVs designsystem-team
+
+- Designed for 24x24px
+- Available in React and SVG
+- Accessible with use of `title`-prop
+- Suffixed with `Icon`
+
+## Install
+
+```bash
+  yarn add @navikt/aksel-icons
+  npm install @navikt/aksel-icons
+```
+
+## Use
+
+```jsx
+import { StarIcon } from "@navikt/ds-icons";
+
+function App() {
+  return <StarIcon title="star" fontSize="1.5rem"/>;
+}
+
+Tip: Use the `title` prop for accessible icons.
+```
+
+### Sizing
+
+Each icons `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for best possible visual representation.
+
+```jsx
+<StarIcon fontSize="1.5rem" />
+```
+
+### Direct svg-import
+
+All icons are available in raw SVG-format behind `/svg`. Note that svg-files do not have the suffix `Icon`.
+
+```js
+import StarIcon from "@navikt/aksel-icons/svg/Star.svg";
+```
+
+If using typescript, TS might complain about not finding types related to the svg-format. Add a `*.d.ts` file with this declaration to fix this. (This was copied from next/image-types/global.d.ts since next solves this internally, but should work elsewhere)
+
+```ts
+declare module "*.svg" {
+  /**
+   * Use `any` to avoid conflicts with
+   * `@svgr/webpack` plugin or
+   * `babel-plugin-inline-react-svg` plugin.
+   */
+  const content: any;
+
+  export default content;
+}
+```
+
+## [Learn more](https://aksel.nav.no/ikoner)
+
+## License
+
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)

@navikt/aksel-icons/__tests__/validate-config.js

@@ -0,0 +1,34 @@
+const fastglob = require("fast-glob");
+const path = require("path");
+const jsYaml = require("js-yaml");
+const fs = require("fs");
+
+const basePath = path.resolve(__dirname, "../icons");
+
+const ymlList = fastglob
+  .sync("*.yml", { cwd: basePath })
+  .map((fileN) => path.basename(fileN));
+
+describe(`Each icons YML-config is valid`, () => {
+  ymlList.forEach((file) => {
+    it(`${file} has valid YML-config`, () => {
+      const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
+        schema: jsYaml.JSON_SCHEMA,
+      });
+      expect(ymlData.name).toBeTruthy();
+      expect(ymlData.category).toBeTruthy();
+      expect(ymlData.sub_category).toBeTruthy();
+      expect(ymlData.keywords).toBeTruthy();
+      expect(ymlData.variant).toBeTruthy();
+      expect(ymlData.keywords.length).toBeGreaterThan(0);
+      expect(ymlData.updated_at).toBeTruthy();
+      expect(isDate(ymlData.updated_at)).toBeTruthy();
+      expect(ymlData.created_at).toBeTruthy();
+      expect(isDate(ymlData.created_at)).toBeTruthy();
+    });
+  });
+});
+
+function isDate(dateStr) {
+  return !isNaN(new Date(dateStr.split(".").reverse().join(".")).getDate());
+}

@navikt/aksel-icons/__tests__/validate-files.js

@@ -0,0 +1,32 @@
+const fastglob = require("fast-glob");
+const path = require("path");
+
+const basePath = path.resolve(__dirname, "../icons");
+
+const svgList = fastglob
+  .sync("*.svg", { cwd: basePath })
+  .map((fileN) => path.basename(fileN));
+
+const ymlList = fastglob
+  .sync("*.yml", { cwd: basePath })
+  .map((fileN) => path.basename(fileN));
+
+describe(`Each SVG-file has a matching YML file`, () => {
+  it(`must have a corresponding YML file`, () => {
+    expect(
+      ymlList
+        .map((yml) => yml.replace(".yml", ".svg"))
+        .filter((file) => !svgList.includes(file))
+    ).toStrictEqual([]);
+  });
+});
+
+describe(`Each YML-file has a matching SVG file`, () => {
+  it(`must have a corresponding SVG file`, () => {
+    expect(
+      svgList
+        .map((svg) => svg.replace(".svg", ".yml"))
+        .filter((file) => !ymlList.includes(file))
+    ).toStrictEqual([]);
+  });
+});

@navikt/aksel-icons/__tests__/validate-svg.mjs

@@ -0,0 +1,71 @@
+import { basename } from "path";
+import { unified } from "unified";
+import parse from "rehype-parse";
+import fastglob from "fast-glob";
+import { readFileSync } from "fs";
+import { select, selectAll } from "hast-util-select";
+
+const basePath = "./icons";
+
+const svgList = fastglob
+  .sync("*.svg", { cwd: basePath })
+  .map((fileN) => basename(fileN));
+
+describe(`Each icons has a valid code`, () => {
+  svgList.forEach((file) => {
+    describe(`${file} has valid code`, () => {
+      const iconAst = unified()
+        .use(parse, { fragment: true, space: "svg" })
+        .parse(readFileSync(`${basePath}/${file}`));
+
+      it(`has valid attributes on root-node`, () => {
+        const properties = Object.keys(
+          select(":root", iconAst).properties
+        ).sort();
+
+        expect(properties).toStrictEqual(
+          ["viewBox", "xmlns", "height", "width", "fill"].sort()
+        );
+      });
+
+      it(`has valid xml-attr`, () => {
+        const xmlns = select(":root", iconAst).properties.xmlns;
+        expect(xmlns).toBe("http://www.w3.org/2000/svg");
+      });
+
+      it(`has valid viewbox`, () => {
+        const viewbox = select(":root", iconAst).properties.viewBox;
+        expect(viewbox).toBe("0 0 24 24");
+      });
+
+      it(`root fill is none`, () => {
+        const fill = select(":root", iconAst).properties.fill;
+        expect(fill).toBe("none");
+      });
+
+      it(`has valid width and height`, () => {
+        const width = select(":root", iconAst).properties.width;
+        const height = select(":root", iconAst).properties.height;
+        expect(width).toBe("24");
+        expect(height).toBe("24");
+      });
+
+      it(`has valid stroke`, () => {
+        const nodes = selectAll("*", iconAst);
+
+        nodes.forEach((n) => {
+          n.properties?.stroke &&
+            expect(n.properties.stroke).toEqual("#262626");
+        });
+      });
+
+      it(`has valid stroke-width`, () => {
+        const nodes = selectAll("*", iconAst);
+        nodes.forEach((n) => {
+          n.properties?.strokeWidth &&
+            expect(n.properties?.strokeWidth).toEqual("1.5");
+        });
+      });
+    });
+  });
+});

@navikt/aksel-icons/config/cleanTypes.js

@@ -0,0 +1,22 @@
+/**
+ * Fikser https://github.com/navikt/aksel/issues/1758
+ */
+
+const fs = require("fs");
+
+const basePath = "./dist/react/esm";
+
+const files = fs.readdirSync(basePath).filter((x) => x.endsWith(".d.ts"));
+
+files.forEach((file) => {
+  let data = fs.readFileSync(`${basePath}/${file}`).toString().split("\n");
+
+  data = data.map((x) => {
+    return x.includes("React.ForwardRefExoticComponent")
+      ? x.split(":")[0] +
+          `: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & SVGRProps & React.RefAttributes<SVGSVGElement>>;`
+      : x;
+  });
+
+  fs.writeFileSync(`${basePath}/${file}`, data.join("\n"));
+});