-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Nedlastning av valgte ikoner i png-format og fargevelger (#973)
* converterer svg til png format * gitignore update * oppdatert build steps package.json * kan nå laste ned alle ikoner i png format * zipper svg og png riktig * git fix * oppdaterte ikon svg zip * info om bruk av png ikoner * lint fix * la til png zip * fjernet -png fra git * publish fix(2) * build fix * implementert fargevelger * fullført implementering av fargevelger og png nedlastning * oppdatert navn pngs * lint fix * oppdatert ikoner for svg pakke * diverse UU forbedringer * småfiks for mobilvisning og fargevisning * lint fix * fikser state for valgt farge * Flyttet svg.zip til buildsteg
- Loading branch information
Showing
14 changed files
with
326 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| const zipdir = require("zip-dir"); | ||
|
|
||
| const zipDir = async (dir, name) => { | ||
| await zipdir(dir, { saveTo: name }, function (err, buffer) { | ||
| if (err) { | ||
| console.error(err); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| try { | ||
| zipDir("./png/", "NAV-ikonpakke-png.zip"); | ||
| zipDir("./svg/", "NAV-ikonpakke-svg.zip"); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React, { useState } from "react"; | ||
| import cl from "classnames"; | ||
| import { Close } from "@navikt/ds-icons"; | ||
| import "./index.css"; | ||
| import "@navikt/ds-css/button/index.css"; | ||
|
|
||
| const cls = (selected, none = false) => { | ||
| return cl("colorswitch__button", "navds-button", "navds-button--secondary", { | ||
| "colorswitch__button--none": none, | ||
| "colorswitch__button--selected": selected, | ||
| }); | ||
| }; | ||
|
|
||
| interface ColorSwtichProps { | ||
| onChange: (color) => void; | ||
| } | ||
|
|
||
| const ColorSwitch = ({ onChange, ...props }: ColorSwtichProps) => { | ||
| const colors = ["#FFFFFF", "#000000", "#0067C5"]; | ||
| const [selectedColor, setSelectedColor] = useState("currentColor"); | ||
|
|
||
| const onColorChange = (color) => { | ||
| setSelectedColor(color); | ||
| onChange(color); | ||
| }; | ||
| return ( | ||
| <div className="colorswitch"> | ||
| <button | ||
| className={cls(selectedColor === "currentColor", true)} | ||
| onClick={() => onColorChange("currentColor")} | ||
| aria-label="Sett farge til currentColor" | ||
| aria-pressed={selectedColor === "currentColor"} | ||
| > | ||
| <Close className="colorswitch__closeicon" /> | ||
| </button> | ||
| {colors.map((c) => ( | ||
| <button | ||
| key={c} | ||
| className={cls(selectedColor === c)} | ||
| style={{ backgroundColor: c }} | ||
| onClick={() => onColorChange(c)} | ||
| aria-label={`Sett farge til hex ${c}`} | ||
| aria-pressed={selectedColor === c} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ColorSwitch; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| .colorswitch { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .colorswitch__button.navds-button { | ||
| height: 2rem; | ||
| width: 2rem; | ||
| padding: 0; | ||
| border-radius: 0.5rem; | ||
| margin: 0.2rem; | ||
| box-shadow: var(--navds-shadow-hover); | ||
| transform: translateY(0.2rem); | ||
| border: 1px solid var(--navds-color-darkgray); | ||
| } | ||
|
|
||
| .colorswitch__button--none.navds-button { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: 2rem; | ||
| background-color: #ffffff; | ||
| } | ||
|
|
||
| .colorswitch__closeicon { | ||
| color: #a13a28; | ||
| } | ||
|
|
||
| .colorswitch__button--selected.navds-button { | ||
| transform: translateY(-0.4rem); | ||
| transform: rotateZ(5deg); | ||
| box-shadow: var(--navds-shadow-focus); | ||
| border: 1px solid #f1f1f1; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| const JSZip = require("jszip"); | ||
| const canvg = require("canvg"); | ||
|
|
||
| export const generatePngZip = async (svgstring: string, name: string) => { | ||
| const sizes = [16, 24, 128, 256]; | ||
|
|
||
| const zip = new JSZip(); | ||
| const canvas = document.createElement("canvas"); | ||
| const ctx = canvas.getContext("2d"); | ||
|
|
||
| sizes.forEach((size) => { | ||
| let svg = svgstring.replace(/width="[^"]*"/, `width="${size}px"`); | ||
| svg = svg.replace(/height="[^"]*"/, `height="${size}px"`); | ||
|
|
||
| const v = canvg.Canvg.fromString(ctx, svg); | ||
| v.start(); | ||
|
|
||
| const data = canvas | ||
| .toDataURL("image/png", 1) | ||
| .replace(/^data:image\/\w+;base64,/, ""); | ||
|
|
||
| v.stop(); | ||
|
|
||
| zip | ||
| .folder(`${name}-png`) | ||
| .file(`${name}-${size}px.png`, data, { base64: true }); | ||
| }); | ||
|
|
||
| return await zip.generateAsync({ type: "blob" }); | ||
| }; |
Oops, something went wrong.