Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
537cdd3def | ||
|
|
e9cd4f2e2b | ||
|
|
064bf66c0f | ||
|
|
a8b66dfec9 | ||
|
|
8f99813590 | ||
|
|
21b078a9a4 | ||
|
|
e89d3b27b2 | ||
|
|
ddd2fd2e08 | ||
|
|
a7c326aa43 | ||
|
|
0b89387bae | ||
|
|
8a58d75efb | ||
|
|
bf18ffcb0c | ||
|
|
ad3c88d542 | ||
|
|
eb90447bb7 | ||
|
|
cb429868c1 | ||
|
|
e09f478a09 | ||
|
|
00259c629b | ||
|
|
6124812ba8 | ||
|
|
5f6bd160d6 | ||
|
|
b876ffb607 | ||
|
|
6886cf7a67 | ||
|
|
a9e58e7bb2 | ||
|
|
861803f5ae | ||
|
|
5d383b754f | ||
|
|
a8dc377870 | ||
|
|
ead0378644 | ||
|
|
10a6bc18c4 | ||
|
|
68d4b60f0e | ||
|
|
106e37bc54 | ||
|
|
78080293d3 | ||
|
|
d511210582 | ||
|
|
78b103bb3e | ||
|
|
9c78338164 | ||
|
|
08c9069879 | ||
|
|
3ab1645994 | ||
|
|
a64fc8905d | ||
|
|
5d83818c1b | ||
|
|
1148825a99 | ||
|
|
778b1a4932 | ||
|
|
74b77c0bba | ||
|
|
5fc4ea483d | ||
|
|
d002c03647 | ||
|
|
da1ffe8318 | ||
|
|
0128f5a467 | ||
|
|
0a61ab629a | ||
|
|
4ea5face0c | ||
|
|
248a83221a | ||
|
|
eceaa7e659 | ||
|
|
811c0024c5 | ||
|
|
aaefaddb13 | ||
|
|
f464347f6e | ||
|
|
6608d01c1e | ||
|
|
335bc62922 | ||
|
|
3c230d8f4c | ||
|
|
5bb7de3b4c | ||
|
|
9597c24328 | ||
|
|
2642c2914e | ||
|
|
74d0b0cf1f | ||
|
|
55ca4d26a7 | ||
|
|
474ea81bbd | ||
|
|
ae8ee87897 | ||
|
|
ecf96dac16 | ||
|
|
982e1dce2c | ||
|
|
f910ca1c15 | ||
|
|
1c161d1403 | ||
|
|
279c89195e | ||
|
|
260085f026 | ||
|
|
c70a3a78e8 | ||
|
|
236feb37e8 | ||
|
|
29ea9f4cb3 | ||
|
|
ebb04c4a56 | ||
|
|
438c844221 | ||
|
|
656de64a4d | ||
|
|
777f3ec95b | ||
|
|
adebf90f68 | ||
|
|
77fc400688 | ||
|
|
004dfb90f1 | ||
|
|
327c92131b | ||
|
|
6b1f395df8 | ||
|
|
381adf6cb1 | ||
|
|
47ef162268 | ||
|
|
d9359d1a86 | ||
|
|
b08d922689 | ||
|
|
3db81c9b79 | ||
|
|
be26724b07 | ||
|
|
95ac6ebf3c | ||
|
|
b74f5d6184 | ||
|
|
0386752686 | ||
|
|
0a3fe8a1d9 | ||
|
|
855c2eac9e | ||
|
|
ed90d205b6 | ||
|
|
d1bd479cf3 | ||
|
|
c24f5a029c | ||
|
|
129769128e |
No files matched your search
@@ -1,7 +1,7 @@
|
||||
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
|
||||
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
|
||||
|
||||
name: Build, test and maybe publish
|
||||
name: Build -> Test -> Publish
|
||||
|
||||
on:
|
||||
push:
|
||||
@@ -39,12 +39,6 @@ jobs:
|
||||
run: yarn lint
|
||||
- name: Test
|
||||
run: yarn test
|
||||
- name: add access token to .env
|
||||
run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
|
||||
- name: add branch token to .env
|
||||
run: echo "BRANCH=HEAD" >> website/.env
|
||||
- name: Test gatsby-build (design.nav.no)
|
||||
run: yarn build:gatsby
|
||||
|
||||
publish-npm:
|
||||
needs: test-build
|
||||
@@ -100,56 +94,4 @@ jobs:
|
||||
AUTH_TOKEN: ${{secrets.GIT_REPO}}
|
||||
- name: Publish to Github registry
|
||||
run: |
|
||||
rm lerna.json && cp utilities/lerna.json lerna.json
|
||||
git add . && git commit -m "tmp"
|
||||
yarn lerna publish --registry https://npm.pkg.github.com from-package --yes
|
||||
|
||||
publish-pages:
|
||||
needs: test-build
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event_name == 'push'
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: "0"
|
||||
token: ${{secrets.GIT_REPO}}
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: Install deps
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: Gulp-build
|
||||
run: yarn boot
|
||||
- name: add access token to .env
|
||||
run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
|
||||
- name: add branch token to .env
|
||||
run: echo "BRANCH=HEAD" >> website/.env
|
||||
- name: Building Gatsby
|
||||
run: yarn build:gatsby
|
||||
- name: Building Storybook
|
||||
run: yarn build-storybook
|
||||
|
||||
- name: Deploy to Design.nav.no 🚀
|
||||
uses: JamesIves/github-pages-deploy-action@3.6.2
|
||||
with:
|
||||
GITHUB_TOKEN: $NAV_DS_TOKEN
|
||||
BRANCH: gh-pages
|
||||
FOLDER: website/public
|
||||
env:
|
||||
NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
|
||||
|
||||
- name: Deploy storybook to designsystem-repo
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
personal_token: ${{secrets.GIT_REPO}}
|
||||
external_repository: navikt/designsystemet
|
||||
publish_dir: ./storybook-static
|
||||
user_name: "github-actions[bot]"
|
||||
user_email: "github-actions[bot]@users.noreply.github.com"
|
||||
@@ -1,39 +0,0 @@
|
||||
# This workflow will run will build the component library and the storybook, then publish it to https://navikt.github.io/Designsystemet
|
||||
|
||||
name: Publish Storybook
|
||||
|
||||
on:
|
||||
workflow_dispatch
|
||||
|
||||
jobs:
|
||||
publish-storybook:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: "0"
|
||||
token: ${{secrets.GIT_REPO}}
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: Install deps
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Gulp-build
|
||||
run: yarn boot
|
||||
- name: Building Storybook
|
||||
run: yarn build-storybook
|
||||
- name: Deploy storybook
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
personal_token: ${{secrets.GIT_REPO}}
|
||||
external_repository: navikt/designsystemet
|
||||
publish_dir: ./storybook-static
|
||||
user_name: "github-actions[bot]"
|
||||
user_email: "github-actions[bot]@users.noreply.github.com"
|
||||
@@ -1,47 +0,0 @@
|
||||
name: Publish verktøykasse-innhold to dev
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: verktoykasse-prototype
|
||||
repository_dispatch:
|
||||
types: [new-content]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
ref: verktoykasse-prototype
|
||||
fetch-depth: 0 # Required to retrieve git history
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: Install deps
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: Gulp-build
|
||||
run: yarn boot
|
||||
- name: Eslint and Stylelint
|
||||
run: yarn lint
|
||||
- name: add access token to .env
|
||||
run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
|
||||
- name: add branch token to .env
|
||||
run: echo "BRANCH=dev" >> website/.env
|
||||
- name: Gatsby-build
|
||||
run: yarn build:gatsby
|
||||
- name: Deploy to dev gh-pages
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
personal_token: ${{secrets.GIT_REPO}}
|
||||
external_repository: navikt/verktoykasse-innhold
|
||||
publish_dir: website/public
|
||||
user_name: "github-actions[bot]"
|
||||
user_email: "github-actions[bot]@users.noreply.github.com"
|
||||
@@ -1,14 +1,16 @@
|
||||
const getStories = () => {
|
||||
return process.env.stories
|
||||
? [`../@navikt/**/${process.env.stories}.stories.@(js|jsx|ts|tsx|mdx)`]
|
||||
: ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"];
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
webpackFinal: async (config, { configType }) => {
|
||||
config.devServer = { stats: "errors-only" };
|
||||
return config;
|
||||
},
|
||||
devServer: { stats: "errors-only" },
|
||||
stories: [
|
||||
"../.storybook/**/*.stories.@(mdx)",
|
||||
"../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
|
||||
"../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
|
||||
],
|
||||
stories: () => getStories(),
|
||||
addons: [
|
||||
"@storybook/addon-docs",
|
||||
"@storybook/addon-a11y",
|
||||
@@ -28,4 +30,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
],
|
||||
core: {
|
||||
builder: "webpack5",
|
||||
},
|
||||
};
|
||||
@@ -1,4 +1,3 @@
|
||||
import "nav-frontend-core";
|
||||
import "@navikt/ds-css/index.css";
|
||||
import "@navikt/ds-css-internal/index.css";
|
||||
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="ds-react/Kom i gang" />
|
||||
|
||||
# Ta i bruk `@navikt/ds-react` pakken
|
||||
|
||||
## Oppsett
|
||||
|
||||
```bash
|
||||
yarn add @navikt/ds-react @navikt/ds-css
|
||||
```
|
||||
|
||||
Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
|
||||
For å legge til all stylingen som trengs må man da bare importere `ds-css`.
|
||||
|
||||
```bash
|
||||
import "@navikt/ds-css"
|
||||
```
|
||||
|
||||
Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
|
||||
|
||||
Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.
|
||||
|
||||
## Bruke styled-components eller emotion
|
||||
|
||||
Flere av våre komponenter er implementert med OverridableComponent. Dette vil si at komponenten tar i mot en prop, `as` som lar deg endre hvilken tag som blir satt.
|
||||
Bruk for dette er eks hvis du ønsker `Heading` stilen, men ikke en heading-tag. Da kan man lett skrive `<Heading as="div">` og man vil få en `div`-tag istedenfor.
|
||||
|
||||
Flere css-in-js bibliotek har også denne funksjonaliteten bygd inne, noe som kan komplisere ting når alle bruker samme navn `as` for dette.
|
||||
|
||||
### Løsninger
|
||||
|
||||
[Styled-components](https://styled-components.com/docs/api#forwardedas-prop)
|
||||
|
||||
> TLDR: Bruk `forwardedAs` istendenfor `as` på komponentene, SD fikser resten.
|
||||
@@ -1,263 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="ds-react/Migration" />
|
||||
|
||||
# Migreringsguider
|
||||
|
||||
## Migrering til ds-css v0.12, ds-tokens v0.7
|
||||
|
||||
### Tokens er refaktort og oppdatert
|
||||
|
||||
- Vi har nå fått helt nye tokens synket fra 3.0 biblioteket i Figma.
|
||||
- Dette vi si at de som har brukt tokens for styling i sitt prosjekt må gå gjennom å fikse alle endringene.
|
||||
- Hvis du bare har brukt react-komponentene rett ut av boken så har denne endringene ikke noe å si for deg.
|
||||
|
||||
## Migrering til ds-react v0.11, ds-css v0.10
|
||||
|
||||
### ErrorSummary
|
||||
|
||||
- ErrorSummaryItem -> ErrorSummary.Item
|
||||
Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
|
||||
|
||||
### SearchField
|
||||
|
||||
- SearchFieldButton -> SearchField.Button
|
||||
- SearchFieldClearButton -> SearchField.Clear
|
||||
- SearchFieldInput -> SearchField.Input
|
||||
|
||||
SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
|
||||
|
||||
### CopyToClipBoard
|
||||
|
||||
Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
|
||||
så fikses med
|
||||
|
||||
```bash
|
||||
yarn install @navikt/ds-react-internal @navikt/ds-css-internal
|
||||
```
|
||||
|
||||
## Migrering til ds-react, ds-css v0.8.0
|
||||
|
||||
Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
|
||||
For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.
|
||||
|
||||
Fra versjon v0.7 til v0.8 er det komment flere store endringer både i ds-react og ds-css. For å lettere
|
||||
oppdatere til v0.8 har vi da laget en liten guide som forklarer de største endringene.
|
||||
|
||||
## Styling
|
||||
|
||||
De fleste komponenter har fått diverse justering på styling. Anbefales da å ta en rask sjekk om alt fortsatt stemmer
|
||||
etter oppdateringen.
|
||||
|
||||
## Sizing
|
||||
|
||||
Alle komponenter som tidligere var implementert med `size`-prop har fått oppdatert
|
||||
props fra "xs", "s", "m", "l", "xl", "2xl" -> "xsmall", "small", "medium", "large", "xlarge", "2xlarge".
|
||||
|
||||
Dette betyr også at css-stylingen er eks endret fra `.navds-body-short--s` -> `.navds-body-short--small`
|
||||
|
||||
## Overridable component
|
||||
|
||||
Komponenter som tidligere implementerte ovveridable component med bruk av `component`-prop bruker nå `as`.
|
||||
Implementasjonen av OverridableComponent er WIP så kan hende typene ender opp med å krangle i enkelte tilfeller. Om så ta gjerne kontakt med oss
|
||||
slik at vi får sett på det tilfellet!
|
||||
|
||||
```jsx
|
||||
/* Før */
|
||||
<BodyShort component="span" />
|
||||
|
||||
/* Etter */
|
||||
<BodyShort as="span" />
|
||||
```
|
||||
|
||||
## Navneendringer
|
||||
|
||||
### Buttons
|
||||
|
||||
- `Primary` -> `Secondary` (Normal)
|
||||
- `Action` -> `Primary` (Hoved)
|
||||
- `Secondary` -> `Tertiary` (Flat)
|
||||
|
||||
For alle som har brukt `<Button />` så må man fikse slik at riktige knapper blir brukt der de skal!
|
||||
|
||||
## Nytt
|
||||
|
||||
- GuidePanel (veilederpanel)
|
||||
- HelpText (Hjeleptext)
|
||||
|
||||
### Typography
|
||||
|
||||
Vi har valgt å endre fra `<Title/>` -> `<Heading/>` i typografien vår da dette ga mer mening i bruk.
|
||||
APIet til komponenten er ikke endret borsett fra "Sizing" endringene nevt lengre opp, så skal bare være en rask search/replace.
|
||||
|
||||
For de som har brukt css-en direkte, eks `navds-title` så må man endre til `navds-heading`
|
||||
|
||||
Endret `Header` -> `PageHeader`, samme som er nevnt ang endringen over gjelder her også: sjekk css hvis brukt direkte.
|
||||
|
||||
## Fjernet komponenter
|
||||
|
||||
Fjernet da den var utdaterte/må ses mer på
|
||||
|
||||
- ProductPageLayout
|
||||
|
||||
## Typography
|
||||
|
||||
Linjehøyder for alle typo-komponentene er oppdatert til å matche figma.
|
||||
|
||||
Lagt til en Heading lvl 6 og size="xsmall"
|
||||
|
||||
## AccordionMenu
|
||||
|
||||
Implementert med dot-notation
|
||||
|
||||
- Trenger bare importere AccordionMenu
|
||||
- AccordionMenuCollapsable -> AccordionMenu.Collapsable
|
||||
- AccordionMenuItem -> AccordionMenu.Item
|
||||
|
||||
## Accordion
|
||||
|
||||
Implementert med dot-notation
|
||||
|
||||
- Trenger bare importere Accordion nå
|
||||
|
||||
Fragmenterte komponenten:
|
||||
|
||||
- Accordion -> Accordion.Item
|
||||
- Header -> Accordion.Header
|
||||
- children -> Accordion.Content
|
||||
|
||||
La til prop: `defaultOpen` på `Accordion.Item`
|
||||
|
||||
```jsx
|
||||
/* Før */
|
||||
<Accordion heading="tittel" open={open} onClick={(open) => setOpen(!open)}>
|
||||
Eu magna fugiat officia
|
||||
</Accordion>
|
||||
<Accordion heading="tittel2" open={open2} onClick={(open2) => setOpen(!open2)}>
|
||||
Eu magna fugiat officia
|
||||
</Accordion>
|
||||
|
||||
/* Etter */
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={(open) => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item open={open2}>
|
||||
<Accordion.Header onClick={(open2) => setOpen(!open2)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
## Alert
|
||||
|
||||
- La til `fullWidth`-prop for alert uten border-radius og width 100%
|
||||
- La til `inline`-prop for alert med transparent border/background og 0 padding.
|
||||
|
||||
## Button
|
||||
|
||||
Oppdatert med Overridablecomponent.
|
||||
|
||||
Håndtering av sentrering, margins er oppdatert. Trenger ikke wrappe tekst med `span` når man skal bruke ikoner lengre.
|
||||
|
||||
Hvis man skal manuelt justere på alignment av innhold, eks bruke `flex-direction: column` må man sette
|
||||
det på css-klassen `.navds-button__inner` da children er wrappet i den.
|
||||
|
||||
## CopyToClipboard
|
||||
|
||||
Ekstender nå ButtonProps, slik at man eks kan ta i bruk `size`-proppen
|
||||
|
||||
`text`-prop -> `copyText`
|
||||
`label`-prop -> `popoverText`
|
||||
|
||||
Fjernet `icon`-prop, la til `popoverPlacement`
|
||||
|
||||
## Modal
|
||||
|
||||
Implementert med dot-notasjon
|
||||
|
||||
Innholds-padding er flyttet fra Modal -> Modal.Content
|
||||
|
||||
```
|
||||
/* Før */
|
||||
<Modal>Modal innhold</Modal>
|
||||
|
||||
/* Etter */
|
||||
<Modal><Modal.Content>Modal innhold</Modal.Content></Modal>
|
||||
```
|
||||
|
||||
## LinkPanel
|
||||
|
||||
Implementert med dot-notasjon
|
||||
|
||||
```jsx
|
||||
/* Før */
|
||||
<LinkPanel href="#">Consectetur eu duis aliqua eu irure fugiat fugiat eu.</LinkPanel>
|
||||
|
||||
/* Etter */
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
Kan nå legge til en beskrivelse med `Linkpanel.Description`
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>Aliqua id aliquip Lorem esse</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
## Popover
|
||||
|
||||
Implementert med dot-notasjon
|
||||
|
||||
Får nå padding rundt innhold med Popover.Content
|
||||
|
||||
```jsx
|
||||
|
||||
/* Før */
|
||||
|
||||
<Popover>Popover innhold</Popover>
|
||||
|
||||
/* Etter */
|
||||
|
||||
<Popover>
|
||||
<Popover.Content>Modal innhold</Popover.Content>
|
||||
</Popover>
|
||||
```
|
||||
|
||||
## Header -> PageHeader
|
||||
|
||||
Props må fikses for de som har brukt denne komponenten, i tilleg til å endre navn.
|
||||
|
||||
- `variant`-prop -> `align`
|
||||
- `theme`-prop -> `variant`
|
||||
|
||||
## MicroCard
|
||||
|
||||
- Oppdatert med OverridableComponent
|
||||
|
||||
## SpeechBubble
|
||||
|
||||
Implementert med Dot-notasjon
|
||||
|
||||
- `<Bubble/>` -> `<SpeechBubble.Bubble/>`
|
||||
|
||||
Bubble er fortsatt eksportert så vil ikke brekke noe for de som har begynt å ta denne i bruk.
|
||||
@@ -1,269 +0,0 @@
|
||||
import { Table as DsTable } from "@navikt/ds-react";
|
||||
import {
|
||||
SuccessFilled as SuccessIcon,
|
||||
ErrorFilled as ErrorIcon,
|
||||
} from "@navikt/ds-icons";
|
||||
import styled from "styled-components";
|
||||
|
||||
const Success = styled(SuccessIcon)`
|
||||
color: var(--navds-semantic-color-feedback-success-icon);
|
||||
`;
|
||||
|
||||
const Error = styled(ErrorIcon)`
|
||||
color: var(--navds-semantic-color-feedback-danger-icon);
|
||||
`;
|
||||
|
||||
const Table = styled(DsTable)`
|
||||
.navds-table__cell > svg,
|
||||
.navds-table__cell > span {
|
||||
vertical-align: middle;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
`;
|
||||
|
||||
type CompT = {
|
||||
name: string;
|
||||
status: Partial<[boolean, boolean, boolean]>;
|
||||
desc?: React.ReactNode;
|
||||
};
|
||||
|
||||
const Components: CompT[] = [
|
||||
{
|
||||
name: "Alertstriper",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: Alert",
|
||||
},
|
||||
{ name: "Chevron", status: [false], desc: "" },
|
||||
{
|
||||
name: "Core",
|
||||
status: [true, true, false],
|
||||
desc: <code>@navikt/ds-css</code>,
|
||||
},
|
||||
{
|
||||
name: "Ekspanderbartpanel",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: Accordion, styling ikke oppdatert til nyeste versjon",
|
||||
},
|
||||
{ name: "Etiketter", status: [true, true, false], desc: "Navn: Tag" },
|
||||
{
|
||||
name: "Fullbreddeknapp-style",
|
||||
status: [false],
|
||||
desc: "",
|
||||
},
|
||||
{ name: "Grid", status: [true, true, false], desc: "Navn: Grid" },
|
||||
{ name: "Hjelpetekst", status: [true, true, true], desc: "Navn: HelpText" },
|
||||
{
|
||||
name: "Ikoner-assets",
|
||||
status: [true, true, true],
|
||||
desc: <code>@navikt/ds-icons</code>,
|
||||
},
|
||||
{
|
||||
name: "js-utils",
|
||||
status: [true, true, false],
|
||||
desc:
|
||||
"Diverse util-funksjoner blir eksponert gjennom ds-react, men tar for det meste i bruk npm pakker",
|
||||
},
|
||||
{ name: "Knapper", status: [true, true, true], desc: "Navn: Button" },
|
||||
{ name: "Lenkepanel", status: [true, true, true], desc: "Navn: LinkPanel" },
|
||||
{ name: "Lenker", status: [true, true, true], desc: "Navn: Link" },
|
||||
{ name: "Lesmerpanel", status: [false], desc: "" },
|
||||
{ name: "Lukknapp", status: [false], desc: `Bruk Button med "Close"-ikon` },
|
||||
{ name: "Modal", status: [true, true, true], desc: "Navn: Modal" },
|
||||
{ name: "Paneler", status: [true, true, true], desc: "Navn: Panel" },
|
||||
{
|
||||
name: "Bekrefcheckbokspanel",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: ConfirmationPanel",
|
||||
},
|
||||
{
|
||||
name: "Checkbokspanel-gruppe",
|
||||
status: [false],
|
||||
desc: "Panel-versjon vil ikke tas videre i nytt system",
|
||||
},
|
||||
{
|
||||
name: "Checkbokspanel",
|
||||
status: [false],
|
||||
desc: "Panel-versjon vil ikke tas videre i nytt system",
|
||||
},
|
||||
{
|
||||
name: "Checkbox-gruppe",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: CheckboxGroup",
|
||||
},
|
||||
{ name: "Checkbox", status: [true, true, true], desc: "Navn: Checkbox" },
|
||||
{
|
||||
name: "Feiloppsummering",
|
||||
status: [true, true, false],
|
||||
desc: "Navn: ErrorSummary, API vil bli endret for denne",
|
||||
},
|
||||
{
|
||||
name: "Fnr-input",
|
||||
status: [false],
|
||||
desc:
|
||||
"Skjema-elementer med validering vil ikke bli lagt til med det første, men vil diskuteres i fremtiden",
|
||||
},
|
||||
{ name: "Input", status: [true, true, true], desc: "Navn: TextField" },
|
||||
{
|
||||
name: "Label",
|
||||
status: [false],
|
||||
desc: "Skjema-elementer fikser dette selv",
|
||||
},
|
||||
{ name: "Radio-Gruppe", status: [true, true, true], desc: "RadioGroup" },
|
||||
{ name: "Radio", status: [true, true, true], desc: "Navn: Radio" },
|
||||
{
|
||||
name: "Radiopanel-gruppe",
|
||||
status: [false],
|
||||
desc: "Panel-versjon vil ikke tas videre i nytt system",
|
||||
},
|
||||
{
|
||||
name: "Radio-panel",
|
||||
status: [false],
|
||||
desc: "Panel-versjon vil ikke tas videre i nytt system",
|
||||
},
|
||||
{ name: "Select", status: [true, true, true], desc: "Navn: Select" },
|
||||
{ name: "Skjema-gruppe", status: [true, true, true], desc: "Navn: Fieldset" },
|
||||
{
|
||||
name: "Skjemaelement-feilemelding",
|
||||
status: [false],
|
||||
desc: "",
|
||||
},
|
||||
{ name: "Textarea", status: [true, true, true], desc: "Navn: Textarea" },
|
||||
{ name: "Togglegruppe", status: [true, false, false], desc: "" },
|
||||
{ name: "ToggleKnapp", status: [true, false, false], desc: "" },
|
||||
{
|
||||
name: "Toggle",
|
||||
status: [true, false, false],
|
||||
desc: "Vil bli samme komponent som ToggleKnapp",
|
||||
},
|
||||
{ name: "Popover", status: [true, true, true], desc: "Navn: Popover" },
|
||||
{ name: "Snakkeboble", status: [true, true, true], desc: "SpeechBubble" },
|
||||
{ name: "Spinner", status: [true, true, true], desc: "Navn: Loader" },
|
||||
{ name: "Stegindikator", status: [true, false, false], desc: "" },
|
||||
{
|
||||
name: "Tabell-style",
|
||||
status: [true, true, false],
|
||||
desc: "Navn: Table, Er nå publisert som React-component",
|
||||
},
|
||||
{ name: "Tabs", status: [true, false, false], desc: "" },
|
||||
{ name: "Tekstomrade", status: [false], desc: "" },
|
||||
{
|
||||
name: "Typografi",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: se typography-mappen i storybook",
|
||||
},
|
||||
{ name: "veileder", status: [false], desc: "" },
|
||||
{
|
||||
name: "Veilederpanel",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: GuidePanel",
|
||||
},
|
||||
];
|
||||
|
||||
const NewComps: CompT[] = [
|
||||
{
|
||||
name: "AccordionMenu",
|
||||
status: [true, true, true],
|
||||
desc: "",
|
||||
},
|
||||
{
|
||||
name: "SearcField",
|
||||
status: [true, true, false],
|
||||
desc: "Denne vil undergå større endringer",
|
||||
},
|
||||
{
|
||||
name: "MicroCard",
|
||||
status: [true, true, false],
|
||||
desc: "Vil flyttes over i egen navno pakke for eksterne sider",
|
||||
},
|
||||
{
|
||||
name: "PageHeader",
|
||||
status: [true, true, false],
|
||||
desc: "Vil flyttes over i egen navno pakke for eksterne sider",
|
||||
},
|
||||
{
|
||||
name: "CopyToClipboard",
|
||||
status: [true, true, false],
|
||||
desc: "Vil flyttes over til @navikt/ds-react-internal pakke",
|
||||
},
|
||||
{
|
||||
name: "Table",
|
||||
status: [true, true, false],
|
||||
desc:
|
||||
"Implementer stylingen til nav-frontend-table-styles, API vil videreutvikles",
|
||||
},
|
||||
{
|
||||
name: "Switch",
|
||||
status: [true, false, false],
|
||||
desc: "",
|
||||
},
|
||||
{
|
||||
name: "Tooltip",
|
||||
status: [true, false, false],
|
||||
desc: "",
|
||||
},
|
||||
{
|
||||
name: "Timeline",
|
||||
status: [true, false, false],
|
||||
desc: "",
|
||||
},
|
||||
];
|
||||
|
||||
const CompTable = ({ list }) => (
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>Komponent</Table.HeaderCell>
|
||||
<Table.HeaderCell>Med i nytt system</Table.HeaderCell>
|
||||
<Table.HeaderCell>Publisert i pakker</Table.HeaderCell>
|
||||
<Table.HeaderCell>Fullført**</Table.HeaderCell>
|
||||
<Table.HeaderCell>Info</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{list.map((comp) => {
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>{comp.name}</Table.HeaderCell>
|
||||
<Table.DataCell>
|
||||
{comp.status?.[0] === undefined ? (
|
||||
<span>-</span>
|
||||
) : comp.status?.[0] ? (
|
||||
<Success />
|
||||
) : (
|
||||
<Error />
|
||||
)}
|
||||
</Table.DataCell>
|
||||
<Table.DataCell>
|
||||
{comp.status?.[1] === undefined ? (
|
||||
<span>-</span>
|
||||
) : comp.status?.[1] ? (
|
||||
<Success />
|
||||
) : (
|
||||
<Error />
|
||||
)}
|
||||
</Table.DataCell>
|
||||
<Table.DataCell>
|
||||
{comp.status?.[2] === undefined ? (
|
||||
<span>-</span>
|
||||
) : comp.status?.[1] ? (
|
||||
<Success />
|
||||
) : (
|
||||
<Error />
|
||||
)}
|
||||
</Table.DataCell>
|
||||
<Table.DataCell>{comp.desc ? comp.desc : "-"}</Table.DataCell>
|
||||
</Table.Row>
|
||||
);
|
||||
})}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
|
||||
export const NewCompTable = () => {
|
||||
return <CompTable list={NewComps} />;
|
||||
};
|
||||
|
||||
export const OldCompTable = () => {
|
||||
return <CompTable list={Components} />;
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
import { NewCompTable, OldCompTable } from "./roadmap-table.tsx";
|
||||
|
||||
<Meta title="ds-react/Roadmap" />
|
||||
|
||||
# Roadmap
|
||||
|
||||
## Komponenter
|
||||
|
||||
\*\* Fullført betyr i denne konteksten at vi føler API-et er ok og da kan forvente mindre breaking changes.
|
||||
Komponenten kan fortsatt bli utsatt for endringer i selve designet.
|
||||
|
||||
### Nye komponenter / wip
|
||||
|
||||
<NewCompTable />
|
||||
|
||||
### Migrering av gamle komponenter
|
||||
|
||||
<OldCompTable />
|
||||
|
||||
## Plan videre
|
||||
|
||||
Vi jobber kontinuerlig med å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
|
||||
ny dokumentasjon-side under Verktøykassen, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider.
|
||||
Dette vil la oss bygge mer robuste og fleksible løsninger for fremtiden som skal være bedre tilpasset produktene våre.
|
||||
|
||||
(Rekkefølgen representer ikke faktisk tidslinje)
|
||||
|
||||
## Tokens
|
||||
|
||||
Vi bygger opp `@navikt/ds-tokens` pakken som inneholder alle design-tokensene til designsystemet fra bunnen av.
|
||||
Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke css-variabler.
|
||||
|
||||
## Intern / Ekstern sizing
|
||||
|
||||
Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
|
||||
Eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
|
||||
|
||||
## Ny dokumentasjon-side
|
||||
|
||||
Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i NAV med "Verktøykassen"
|
||||
|
||||
## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
|
||||
|
||||
Dette arbeidet kommer sakte men sikkert på plass, men tar litt tid da mye må på plass først, da eksempelvis sizing og tokens.
|
||||
Noen komponenter vil ha oppdatert funksjonalitet, noen bare stilendringer, mens noen kan nesten brukes 1-1 fra nav-frontend-.
|
||||
|
||||
Note: Noen pakker vil ikke flyttes over fra nav-frontend og `deprecates` i praksis da. De pakkene som ikka tas over vil ikke bli deprecated på `npm`, slik at man kan fortsette å ta dem i bruk uten en sint terminal hver gang man kjører `yarn install`.
|
||||
|
||||
## Theming
|
||||
|
||||
Etterhvert når vi har nye react, css og token pakke på plass har vi et ønske om å kunne se på theming for
|
||||
eks darkmode.
|
||||
|
||||
## Vue, svelte, web-components etc...
|
||||
|
||||
Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
|
||||
noe vi kunne ta en titt på hvis vi ser at det trengs.
|
||||
|
||||
## Versjonering
|
||||
|
||||
De nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
|
||||
ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
|
||||
slik at man kan ha mer finkontroll over komponentbruk på siden sin.
|
||||
@@ -1,20 +1,13 @@
|
||||
const path = require("path");
|
||||
|
||||
module.exports = (baseConfig) => {
|
||||
baseConfig.config.module.rules.push(
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ["style-loader", "css-loader"],
|
||||
include: [
|
||||
path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
loaders: ["style-loader", "css-loader", "less-loader"],
|
||||
include: path.resolve(__dirname, "../packages/"),
|
||||
}
|
||||
);
|
||||
baseConfig.config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
use: ["style-loader", "css-loader"],
|
||||
include: [
|
||||
path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
|
||||
],
|
||||
});
|
||||
baseConfig.config.resolve.alias = {
|
||||
...baseConfig.config.resolve.alias,
|
||||
"./normalize.css": path.resolve(
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
:root {
|
||||
--navds-accordion-menu-color-text: var(--navds-semantic-color-link);
|
||||
--navds-accordion-menu-color-text-focus: var(--navds-semantic-color-text);
|
||||
--navds-accordion-menu-color-background-hover: var(
|
||||
--navds-global-color-blue-50
|
||||
);
|
||||
--navds-accordion-menu-color-text-active: var(--navds-semantic-color-text);
|
||||
--navds-accordion-menu-outline-focus: var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-accordion-menu__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-collapsable__button {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font: inherit;
|
||||
text-align: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
color: var(--navds-accordion-menu-color-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-accordion-menu-item,
|
||||
.navds-accordion-menu-collapsable__button {
|
||||
display: flex;
|
||||
padding: var(--navds-spacing-3) var(--navds-spacing-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-accordion-menu-collapsable__expand-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--navds-accordion-menu-color);
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-collapsable--open
|
||||
> .navds-accordion-menu-collapsable__button
|
||||
> .navds-accordion-menu-collapsable__expand-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-collapsable .navds-accordion-menu-item,
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable__button {
|
||||
padding-left: var(--navds-spacing-8);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-item,
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable__button {
|
||||
padding-left: var(--navds-spacing-12);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-item,
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable
|
||||
.navds-accordion-menu-collapsable__button {
|
||||
padding-left: var(--navds-spacing-16);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-item:focus,
|
||||
.navds-accordion-menu-collapsable__button:focus {
|
||||
outline: 3px solid var(--navds-accordion-menu-outline-focus);
|
||||
outline-offset: -3px;
|
||||
color: var(--navds-accordion-menu-color-text-focus);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-collapsable__button:focus
|
||||
> .navds-accordion-menu-collapsable__expand-icon {
|
||||
color: var(--navds-accordion-menu-color-focus);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-item:hover,
|
||||
.navds-accordion-menu-collapsable__button:hover {
|
||||
background-color: var(--navds-accordion-menu-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-item--active {
|
||||
box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
|
||||
color: var(--navds-accordion-menu-color-text-active);
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -4,11 +4,16 @@
|
||||
---navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-accordion-color-text-hover: var(--navds-semantic-color-link);
|
||||
--navds-accordion-color-border: var(--navds-semantic-color-border-muted);
|
||||
--navds-accordion-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-accordion-color-border-focus: var(
|
||||
---navds-semantic-color-component-background-light
|
||||
--navds-accordion-color-text-open: var(--navds-semantic-color-text);
|
||||
--navds-accordion-color-text-open-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-accordion-color-background-open: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,16 +25,53 @@
|
||||
background: var(--navds-accordion-color-background);
|
||||
}
|
||||
|
||||
.navds-accordion__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-4);
|
||||
padding: var(--navds-spacing-4) var(--navds-spacing-3);
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--navds-accordion-color-border);
|
||||
}
|
||||
|
||||
.navds-accordion__header:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
border-color: var(--navds-accordion-color-border-focus);
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover {
|
||||
color: var(--navds-accordion-color-text-hover);
|
||||
border-color: var(--navds-accordion-color-border-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header {
|
||||
background-color: var(--navds-accordion-color-background-open);
|
||||
color: var(--navds-accordion-color-text-open);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header:hover {
|
||||
border-color: transparent;
|
||||
color: var(--navds-accordion-color-text-open-hover);
|
||||
}
|
||||
|
||||
.navds-accordion__content {
|
||||
color: var(--navds-accordion-color-text);
|
||||
padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
|
||||
border-bottom: 2px solid var(--navds-accordion-color-border);
|
||||
}
|
||||
|
||||
.navds-accordion__item--open
|
||||
> .navds-accordion__header:hover
|
||||
+ *
|
||||
.navds-accordion__content {
|
||||
border-color: var(--navds-accordion-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon {
|
||||
@@ -42,26 +84,6 @@
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
.navds-accordion__header {
|
||||
padding: var(--navds-spacing-4) var(--navds-spacing-3);
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
border: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid #a0a0a0;
|
||||
gap: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-accordion__content {
|
||||
color: var(--navds-accordion-color-text);
|
||||
padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon--filled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -74,6 +74,10 @@
|
||||
--navds-button-color-danger-border-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
|
||||
/* Loader */
|
||||
--navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-on-button-foreground: currentColor;
|
||||
}
|
||||
|
||||
.navds-button {
|
||||
@@ -255,7 +259,18 @@
|
||||
**************************/
|
||||
|
||||
.navds-button:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.navds-button:disabled:not(.navds-button--loading) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-button .navds-loader .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-on-button-foreground);
|
||||
}
|
||||
|
||||
.navds-button--primary .navds-loader .navds-loader__background,
|
||||
.navds-button--danger .navds-loader .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-on-button-background);
|
||||
}
|
||||
@@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
/* Applied when hideLegend is applied to fieldset */
|
||||
.navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
|
||||
.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
/* Applied when hideLabel is applied to form-element */
|
||||
.navds-form-field > .sr-only + :not(:first-child):not(:empty),
|
||||
.navds-form-field > .sr-only + input:not(:first-child) {
|
||||
.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
|
||||
.navds-form-field > .navds-sr-only + input:not(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
:root {
|
||||
--navds-radio-checkbox-color-background: var(
|
||||
--navds-semantic-color-canvas-background-light
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
|
||||
--navds-radio-checkbox-color-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
@@ -73,7 +74,7 @@
|
||||
|
||||
.navds-checkbox__description,
|
||||
.navds-radio__description {
|
||||
color: var(--navds-color-text-primary);
|
||||
color: var(--navds-radio-checkbox-color-text);
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input,
|
||||
@@ -107,6 +108,29 @@
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
|
||||
box-shadow: none;
|
||||
background-color: var(--navds-radio-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0.375rem, -50%);
|
||||
background-color: var(--navds-radio-checkbox-color-background);
|
||||
width: 0.75rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small
|
||||
.navds-checkbox__input:indeterminate
|
||||
+ .navds-checkbox__label::after {
|
||||
transform: translate(0.25rem, -50%);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
background-position: 6px center;
|
||||
@@ -121,7 +145,7 @@
|
||||
+ .navds-checkbox__label::before {
|
||||
background-position: 4px center;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
|
||||
}
|
||||
@@ -142,28 +166,34 @@
|
||||
color: var(--navds-radio-checkbox-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-checkbox-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
|
||||
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:not(:hover):not(:disabled):not(:checked)
|
||||
> .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
|
||||
> .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
|
||||
var(--navds-shadow-focus);
|
||||
|
||||
@@ -21,7 +21,6 @@
|
||||
|
||||
.navds-select__input {
|
||||
appearance: none;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--navds-select-color-background);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--navds-select-color-border);
|
||||
@@ -30,6 +29,7 @@
|
||||
min-height: 48px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0.5rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
@@ -59,6 +59,7 @@
|
||||
.navds-form-field--small .navds-select__input {
|
||||
min-height: 32px;
|
||||
padding: 0.25rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
:root {
|
||||
--navds-switch-color-label: var(--navds-color-text-primary);
|
||||
--navds-switch-color-label: var(--navds-semantic-color-text);
|
||||
--navds-switch-color-label-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
|
||||
--navds-switch-color-track-background-checked: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-switch-color-track-background-hover: var(
|
||||
--navds-global-color-gray-800
|
||||
);
|
||||
--navds-switch-color-track-background-hover-checked: var(
|
||||
--navds-semantic-color-interaction-primary-hover
|
||||
--navds-semantic-color-feedback-success-icon
|
||||
);
|
||||
--navds-switch-color-track-shadow-inner-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
@@ -16,8 +19,12 @@
|
||||
--navds-switch-color-thumb: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
|
||||
--navds-switch-color-thumb-icon-checked: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-switch-color-thumb-loader-checked: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,6 +34,10 @@
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.navds-switch--right {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navds-switch--small {
|
||||
position: relative;
|
||||
min-height: 32px;
|
||||
@@ -61,11 +72,22 @@
|
||||
padding: 0.75rem 0 0.75rem 3.25rem;
|
||||
}
|
||||
|
||||
.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
|
||||
padding: 0.75rem 3.25rem 0.75rem 0;
|
||||
}
|
||||
|
||||
.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
|
||||
padding: calc(var(--navds-spacing-2) - 2px) 0
|
||||
calc(var(--navds-spacing-2) - 2px) 3.25rem;
|
||||
}
|
||||
|
||||
.navds-switch--right.navds-switch--small
|
||||
> .navds-switch__label-wrapper
|
||||
> .navds-switch__content {
|
||||
padding: calc(var(--navds-spacing-2) - 2px) 3.25rem
|
||||
calc(var(--navds-spacing-2) - 2px) 0;
|
||||
}
|
||||
|
||||
.navds-switch--with-description,
|
||||
.navds-switch--small
|
||||
> .navds-switch__label-wrapper
|
||||
@@ -73,7 +95,8 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navds-switch__input:hover ~ .navds-switch__label-wrapper {
|
||||
.navds-switch__input:hover ~ .navds-switch__label-wrapper,
|
||||
.navds-switch__label-wrapper:hover {
|
||||
color: var(--navds-switch-color-label-hover);
|
||||
}
|
||||
|
||||
@@ -89,7 +112,7 @@
|
||||
position: absolute;
|
||||
top: var(--navds-spacing-3);
|
||||
left: 0;
|
||||
border-radius: var(--navds-spacing-4);
|
||||
border-radius: 4px;
|
||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@@ -97,10 +120,20 @@
|
||||
top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-switch--right > .navds-switch__input,
|
||||
.navds-switch--right > .navds-switch__track {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.navds-switch__input:checked ~ .navds-switch__track {
|
||||
background-color: var(--navds-switch-color-track-background-checked);
|
||||
}
|
||||
|
||||
.navds-switch__input:hover ~ .navds-switch__track {
|
||||
background-color: var(--navds-switch-color-track-background-hover);
|
||||
}
|
||||
|
||||
.navds-switch__input:hover:checked ~ .navds-switch__track {
|
||||
background-color: var(--navds-switch-color-track-background-hover-checked);
|
||||
}
|
||||
@@ -121,7 +154,8 @@
|
||||
/* Thumb */
|
||||
.navds-switch__thumb {
|
||||
background-color: var(--navds-switch-color-thumb);
|
||||
border-radius: 50%;
|
||||
color: var(--navds-switch-color-thumb-icon);
|
||||
border-radius: 2.5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
@@ -136,16 +170,19 @@
|
||||
|
||||
.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
|
||||
transform: translateX(20px);
|
||||
color: var(--navds-switch-color-thumb-icon-checked);
|
||||
}
|
||||
|
||||
.navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.navds-switch__input:checked:hover
|
||||
~ .navds-switch__track
|
||||
> .navds-switch__thumb {
|
||||
transform: translateX(18px);
|
||||
.navds-switch__input:checked:hover
|
||||
~ .navds-switch__track
|
||||
> .navds-switch__thumb {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-switch__input:disabled:hover
|
||||
@@ -173,7 +210,7 @@
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.navds-switch--disabled {
|
||||
.navds-switch--disabled:not(.navds-switch--loading) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
|
||||
@@ -24,13 +24,13 @@
|
||||
padding: 0.5rem;
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--navds-text-field-color-border);
|
||||
border: 1px solid var(--navds-text-field-color-border);
|
||||
min-height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-form-field--small > .navds-text-field__input {
|
||||
padding: 0 0.15rem;
|
||||
padding: 0 0.25rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
@@ -52,6 +52,13 @@
|
||||
*/
|
||||
.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
|
||||
border-color: var(--navds-text-field-color-border-error);
|
||||
box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
|
||||
}
|
||||
|
||||
.navds-text-field--error
|
||||
> .navds-text-field__input:focus:not(:hover):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@charset "UTF-8";
|
||||
@import "baseline/baseline.css";
|
||||
@import "typography.css";
|
||||
@import "grid.css";
|
||||
|
||||
@import "accordion.css";
|
||||
@import "accordion-menu.css";
|
||||
@import "alert.css";
|
||||
@import "button.css";
|
||||
@import "content-container.css";
|
||||
@@ -12,12 +12,16 @@
|
||||
@import "help-text.css";
|
||||
@import "link.css";
|
||||
@import "loader.css";
|
||||
@import "menu.css";
|
||||
@import "modal.css";
|
||||
@import "pagination.css";
|
||||
@import "popover.css";
|
||||
@import "tag.css";
|
||||
@import "toggle-group.css";
|
||||
@import "panel.css";
|
||||
@import "link-panel.css";
|
||||
@import "speech-bubble.css";
|
||||
@import "step-indicator.css";
|
||||
@import "table.css";
|
||||
|
||||
/* Navno spesific packages */
|
||||
|
||||
@@ -12,8 +12,6 @@
|
||||
);
|
||||
--navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-transparent-background: transparent;
|
||||
--navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-on-button-foreground: currentColor;
|
||||
}
|
||||
|
||||
.navds-loader {
|
||||
@@ -78,27 +76,6 @@
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Button spesific styling
|
||||
*/
|
||||
|
||||
.navds-button .navds-loader .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-on-button-foreground);
|
||||
}
|
||||
|
||||
.navds-button:hover .navds-loader .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-on-button-background);
|
||||
}
|
||||
|
||||
.navds-button:active .navds-loader .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-on-button-background);
|
||||
}
|
||||
|
||||
.navds-button--primary .navds-loader .navds-loader__background,
|
||||
.navds-button--danger .navds-loader .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-on-button-background);
|
||||
}
|
||||
|
||||
@keyframes loader-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
:root {
|
||||
--navds-menu-color-text: var(--navds-semantic-color-link);
|
||||
--navds-menu-color-text-hover: var(--navds-semantic-color-text);
|
||||
--navds-menu-color-text-focus: var(--navds-semantic-color-text);
|
||||
--navds-menu-color-background-hover: var(--navds-global-color-blue-50);
|
||||
--navds-menu-color-text-active: var(--navds-semantic-color-text);
|
||||
--navds-menu-outline-focus: var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-menu__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.navds-menu__list--inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navds-menu-collapse__button {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font: inherit;
|
||||
text-align: inherit;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
color: var(--navds-menu-color-text);
|
||||
}
|
||||
|
||||
.navds-menu-item,
|
||||
.navds-menu-collapse__button {
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
display: flex;
|
||||
padding: var(--navds-spacing-3) var(--navds-spacing-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-menu-item:focus,
|
||||
.navds-menu-collapse__button:focus {
|
||||
outline: 3px solid var(--navds-menu-outline-focus);
|
||||
outline-offset: -3px;
|
||||
color: var(--navds-menu-color-text-focus);
|
||||
}
|
||||
|
||||
.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
|
||||
color: var(--navds-menu-color-focus);
|
||||
}
|
||||
|
||||
.navds-menu-item:hover,
|
||||
.navds-menu-collapse__button:hover {
|
||||
background-color: var(--navds-menu-color-background-hover);
|
||||
color: var(--navds-menu-color-text-hover);
|
||||
}
|
||||
|
||||
.navds-menu-item--active {
|
||||
box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
|
||||
color: var(--navds-menu-color-text-active);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Collapse icon */
|
||||
.navds-menu-collapse__expand-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-menu-collapse__expand-icon--filled,
|
||||
.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navds-menu-collapse--open
|
||||
> .navds-menu-collapse__button
|
||||
> .navds-menu-collapse__expand-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Nesting levels */
|
||||
.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
|
||||
.navds-menu__list[data-depth="1"] .navds-menu-item {
|
||||
padding-left: var(--navds-spacing-6);
|
||||
}
|
||||
|
||||
.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
|
||||
.navds-menu__list[data-depth="2"] .navds-menu-item {
|
||||
padding-left: var(--navds-spacing-10);
|
||||
}
|
||||
|
||||
.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
|
||||
.navds-menu__list[data-depth="3"] .navds-menu-item {
|
||||
padding-left: var(--navds-spacing-14);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "0.12.6",
|
||||
"version": "0.15.7",
|
||||
"private": false,
|
||||
"description": "Css for NAV Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -21,7 +21,7 @@
|
||||
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.7.0",
|
||||
"@navikt/ds-tokens": "^0.8.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
:root {
|
||||
--navds-pagination-color-background-hover: var(
|
||||
--navds-semantic-color-canvas-background
|
||||
);
|
||||
--navds-pagination-color-background-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
--navds-pagination-color-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-pagination-color-background-selected: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-pagination-color-text-selected: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
}
|
||||
|
||||
.navds-pagination {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-pagination__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-pagination__ellipsis {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--navds-spacing-8);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.navds-pagination--small .navds-pagination__ellipsis {
|
||||
width: var(--navds-spacing-6);
|
||||
}
|
||||
|
||||
.navds-pagination__item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 2px;
|
||||
padding: var(--navds-spacing-1) var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-pagination--small .navds-pagination__item {
|
||||
padding: 2px var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-pagination__item:hover {
|
||||
background-color: var(--navds-pagination-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-pagination__item:active {
|
||||
background-color: var(--navds-pagination-color-background-active);
|
||||
color: var(--navds-pagination-color-text-active);
|
||||
}
|
||||
|
||||
.navds-pagination__item:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus),
|
||||
inset 0 0 0 3px white;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-pagination__item[aria-current="true"] {
|
||||
background-color: var(--navds-pagination-color-background-selected);
|
||||
color: var(--navds-pagination-color-text-selected);
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
color: var(--navds-semantic-color-link);
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next-icon {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.navds-pagination--small .navds-pagination__prev-next-icon {
|
||||
margin: var(--navds-spacing-1);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navds-pagination__next-text {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.navds-pagination__prev-text {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
:root {
|
||||
--navds-step-indicator-color-step-line: var(--navds-semantic-color-divider);
|
||||
--navds-step-indicator-color-step-text: var(--navds-semantic-color-text);
|
||||
--navds-step-indicator-color-step-label: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-step-indicator-color-step-number-background: var(
|
||||
--navds-semantic-color-canvas-background-light
|
||||
);
|
||||
--navds-step-indicator-color-step-number-background-finished: var(
|
||||
--navds-semantic-color-canvas-background
|
||||
);
|
||||
--navds-step-indicator-color-step-number-shadow: var(
|
||||
--navds-semantic-color-border
|
||||
);
|
||||
--navds-step-indicator-color-step-number-shadow-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
--navds-step-indicator-color-step-number-shadow-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-step-indicator-color-step-number-background-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
--navds-step-indicator-color-step-number-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-step-indicator-color-step-number-shadow-inset: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
}
|
||||
|
||||
/* StepIndicator */
|
||||
.navds-step-indicator {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Step */
|
||||
.navds-step-indicator__step-wrapper {
|
||||
padding: 0 var(--navds-spacing-2);
|
||||
flex: 1;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-wrapper--hidelabel {
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
flex-shrink: 1;
|
||||
color: var(--navds-step-indicator-color-step-text);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-number {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin: 0.5rem;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
|
||||
background-color: var(--navds-step-indicator-color-step-number-background);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-wrapper:first-child
|
||||
> .navds-step-indicator__step
|
||||
> .navds-step-indicator__step-number {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-wrapper:last-child
|
||||
> .navds-step-indicator__step
|
||||
> .navds-step-indicator__step-number {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-label {
|
||||
width: 100%;
|
||||
margin-top: var(--navds-spacing-4);
|
||||
text-align: center;
|
||||
color: var(--navds-step-indicator-color-step-label);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-line {
|
||||
flex: 1 1 100%;
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: calc(50% + 2rem);
|
||||
left: calc(-50% + 2rem);
|
||||
display: block;
|
||||
border-top: 2px solid var(--navds-step-indicator-color-step-line);
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active > .navds-step-indicator__step-label {
|
||||
color: var(--navds-step-indicator-color-step-text);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active > .navds-step-indicator__step-number {
|
||||
background-color: var(
|
||||
--navds-step-indicator-color-step-number-background-active
|
||||
);
|
||||
color: var(--navds-step-indicator-color-step-number-text-active);
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--navds-step-indicator-color-step-number-shadow-active);
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step:hover > .navds-step-indicator__step-label {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step.navds-step-indicator__step--disabled:hover
|
||||
> .navds-step-indicator__step-label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active > .navds-step-indicator__step-label,
|
||||
.navds-step-indicator__step--active.navds-step-indicator__step--disabled:hover
|
||||
> .navds-step-indicator__step-label {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step:hover > .navds-step-indicator__step-number {
|
||||
background: var(--navds-step-indicator-color-step-number-background);
|
||||
box-shadow: 0 0 0 2px
|
||||
var(--navds-step-indicator-color-step-number-shadow-hover);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active:hover > .navds-step-indicator__step-number {
|
||||
background-color: var(
|
||||
--navds-step-indicator-color-step-number-background-active
|
||||
);
|
||||
color: var(--navds-step-indicator-color-step-number-text-active);
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--navds-step-indicator-color-step-number-shadow-active);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step:focus > .navds-step-indicator__step-number {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active:focus > .navds-step-indicator__step-number {
|
||||
box-shadow: 0 0 0 1px inset
|
||||
var(--navds-step-indicator-color-step-number-shadow-inset),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--disabled:hover
|
||||
> .navds-step-indicator__step-number {
|
||||
box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--disabled.navds-step-indicator__step--active:disabled
|
||||
> .navds-step-indicator__step-number {
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--navds-step-indicator-color-step-number-shadow-active);
|
||||
}
|
||||
|
||||
/* Finished state */
|
||||
.navds-step-indicator__step--finished > .navds-step-indicator__step-number,
|
||||
.navds-step-indicator__step--finished.navds-step-indicator__step--disabled
|
||||
> .navds-step-indicator__step-number {
|
||||
background: var(--navds-step-indicator-color-step-number-background-finished);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.navds-step-indicator__step--disabled > .navds-step-indicator__step-number,
|
||||
.navds-step-indicator__step--disabled > .navds-step-indicator__step-label {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
:root {
|
||||
--navds-toggle-group-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-toggle-group-color-text: var(--navds-semantic-color-text);
|
||||
--navds-toggle-group-color-border: var(--navds-semantic-color-divider);
|
||||
--navds-toggle-group-color-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
--navds-toggle-group-color-text-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-toggle-group-color-background-pressed: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
--navds-toggle-group-color-text-pressed: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
}
|
||||
|
||||
.navds-toggle-group {
|
||||
border-radius: 7px;
|
||||
background-color: var(--navds-toggle-group-color-background);
|
||||
box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
|
||||
padding: calc(var(--navds-spacing-1) + 1px);
|
||||
gap: var(--navds-spacing-1);
|
||||
display: inline-grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--navds-spacing-3);
|
||||
min-height: 48px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--navds-toggle-group-color-background);
|
||||
color: var(--navds-toggle-group-color-text);
|
||||
border-radius: 2px;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:hover {
|
||||
background-color: var(--navds-toggle-group-color-background-hover);
|
||||
color: var(--navds-toggle-group-color-text-hover);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background),
|
||||
0 0 0 4px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover),
|
||||
0 0 0 4px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button-inner > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button[aria-pressed="true"] {
|
||||
background-color: var(--navds-toggle-group-color-background-pressed);
|
||||
color: var(--navds-toggle-group-color-text-pressed);
|
||||
}
|
||||
|
||||
.navds-toggle-group--small > .navds-toggle-group__button {
|
||||
padding: 0.375rem;
|
||||
min-height: 32px;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-toggle-group--small
|
||||
> .navds-toggle-group__button
|
||||
> .navds-toggle-group__button-inner
|
||||
> svg {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.navds-toggle-group__label {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -4,34 +4,47 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-heading--2xlarge {
|
||||
.navds-heading--xlarge {
|
||||
font-size: var(--navds-font-size-heading-2xlarge);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: var(--navds-font-line-height-heading-2xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--2xlarge.navds-typo--spacing {
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-5);
|
||||
}
|
||||
|
||||
.navds-heading--xlarge {
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
letter-spacing: -0.008em;
|
||||
line-height: var(--navds-font-line-height-heading-xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-large);
|
||||
letter-spacing: -0.004em;
|
||||
line-height: var(--navds-font-line-height-heading-large);
|
||||
}
|
||||
/* Mobile scale */
|
||||
@media (max-width: 480px) {
|
||||
.navds-heading--xlarge {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
letter-spacing: -0.008em;
|
||||
line-height: var(--navds-font-line-height-heading-xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-large);
|
||||
letter-spacing: -0.004em;
|
||||
line-height: var(--navds-font-line-height-heading-large);
|
||||
}
|
||||
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-heading--medium {
|
||||
|
||||
@@ -21,7 +21,11 @@ export const getPublishedIcons = async () => {
|
||||
console.log("Failed getPublishedIcons ");
|
||||
throw e;
|
||||
});
|
||||
return data?.meta?.components;
|
||||
|
||||
return data?.meta?.components?.filter((component: any) => {
|
||||
const page = component?.containing_frame?.pageName;
|
||||
return page !== "🔆Pictogram" && page !== "🧩Placeholder";
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import isChromatic from "chromatic/isChromatic";
|
||||
|
||||
import * as Icons from "../src";
|
||||
import * as Icons from "./src";
|
||||
export default {
|
||||
title: "ds-icons/Ikoner",
|
||||
argTypes: {
|
||||
@@ -16,7 +17,7 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
if (process.env.STORYBOOK_CHROMATIC === "true") {
|
||||
if (isChromatic()) {
|
||||
const iconsStories = storiesOf("ds-icons/Ikoner", module);
|
||||
|
||||
Object.entries(Icons).forEach(([name, Icon]) => {
|
||||
@@ -125,6 +125,18 @@
|
||||
"created_at": "2021-01-11T13:37:55.665Z",
|
||||
"pageName": "Health"
|
||||
},
|
||||
{
|
||||
"name": "Bed",
|
||||
"description": "",
|
||||
"created_at": "2021-12-21T08:49:12.806Z",
|
||||
"pageName": "Family"
|
||||
},
|
||||
{
|
||||
"name": "BedFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-21T08:49:12.811Z",
|
||||
"pageName": "Family"
|
||||
},
|
||||
{
|
||||
"name": "Bell",
|
||||
"description": "",
|
||||
@@ -233,6 +245,18 @@
|
||||
"created_at": "2021-01-11T13:37:55.351Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "Candle",
|
||||
"description": "",
|
||||
"created_at": "2021-12-14T15:33:41.777Z",
|
||||
"pageName": "Pension"
|
||||
},
|
||||
{
|
||||
"name": "CandleFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-14T15:33:41.768Z",
|
||||
"pageName": "Pension"
|
||||
},
|
||||
{
|
||||
"name": "Cantine1",
|
||||
"description": "",
|
||||
@@ -635,6 +659,42 @@
|
||||
"created_at": "2021-01-28T14:00:38.652Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "EllipsisCircleH",
|
||||
"description": "",
|
||||
"created_at": "2021-12-07T14:39:02.017Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "EllipsisCircleHFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-07T14:39:02.022Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "EllipsisH",
|
||||
"description": "",
|
||||
"created_at": "2021-12-07T14:24:59.749Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "EllipsisHFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-07T14:24:59.743Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "EllipsisV",
|
||||
"description": "",
|
||||
"created_at": "2021-12-07T14:39:02.012Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "EllipsisVFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-07T14:39:02.005Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "Email",
|
||||
"description": "",
|
||||
@@ -683,6 +743,18 @@
|
||||
"created_at": "2021-01-11T13:37:55.499Z",
|
||||
"pageName": "Status"
|
||||
},
|
||||
{
|
||||
"name": "Eu",
|
||||
"description": "",
|
||||
"created_at": "2022-02-08T11:45:47.104Z",
|
||||
"pageName": "International"
|
||||
},
|
||||
{
|
||||
"name": "EuFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-02-08T11:45:47.109Z",
|
||||
"pageName": "International"
|
||||
},
|
||||
{
|
||||
"name": "Expand",
|
||||
"description": "",
|
||||
@@ -797,6 +869,18 @@
|
||||
"created_at": "2021-01-11T13:37:55.491Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "FileError",
|
||||
"description": "",
|
||||
"created_at": "2022-01-27T12:48:37.583Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "FileErrorFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-01-27T12:48:37.605Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "FileFilled",
|
||||
"description": "",
|
||||
@@ -815,6 +899,30 @@
|
||||
"created_at": "2021-04-26T09:24:37.951Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "FileProgressFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-01-27T12:48:37.592Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "Files",
|
||||
"description": "",
|
||||
"created_at": "2022-01-27T12:48:37.567Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "FileSuccess",
|
||||
"description": "",
|
||||
"created_at": "2022-01-27T12:48:37.575Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "FileSuccessFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-01-27T12:48:37.598Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "FillForms",
|
||||
"description": "",
|
||||
@@ -833,6 +941,18 @@
|
||||
"created_at": "2020-07-01T10:37:42.891Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "Filter2",
|
||||
"description": "",
|
||||
"created_at": "2022-01-14T09:16:08.202Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "Filter2Filled",
|
||||
"description": "",
|
||||
"created_at": "2022-01-14T09:16:08.197Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "FilterFilled",
|
||||
"description": "",
|
||||
@@ -899,6 +1019,30 @@
|
||||
"created_at": "2021-01-28T14:00:38.520Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "FullscreenEnter",
|
||||
"description": "",
|
||||
"created_at": "2022-02-10T15:01:12.614Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "FullscreenEnterFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-02-10T15:01:12.604Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "FullscreenExit",
|
||||
"description": "",
|
||||
"created_at": "2022-02-10T15:01:12.597Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "FullscreenExitFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-02-10T15:01:12.608Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "Glass",
|
||||
"description": "",
|
||||
@@ -1019,6 +1163,42 @@
|
||||
"created_at": "2021-01-28T14:00:38.669Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "HearingImpaired",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.143Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "HearingImpairedFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.110Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "HearingImpairedTeleslynge",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.154Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "HearingImpairedTeleslyngeFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.147Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "HearingImpairedWireless",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.150Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "HearingImpairedWirelessFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.124Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "Heart",
|
||||
"description": "",
|
||||
@@ -1403,6 +1583,18 @@
|
||||
"created_at": "2021-01-11T13:37:55.543Z",
|
||||
"pageName": "Chevron"
|
||||
},
|
||||
{
|
||||
"name": "NorwegianFlag",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.135Z",
|
||||
"pageName": "International"
|
||||
},
|
||||
{
|
||||
"name": "NorwegianFlagFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.128Z",
|
||||
"pageName": "International"
|
||||
},
|
||||
{
|
||||
"name": "NoSmoking",
|
||||
"description": "",
|
||||
@@ -1451,6 +1643,18 @@
|
||||
"created_at": "2021-01-11T13:37:55.393Z",
|
||||
"pageName": "Building"
|
||||
},
|
||||
{
|
||||
"name": "Over18",
|
||||
"description": "",
|
||||
"created_at": "2021-12-15T15:16:55.874Z",
|
||||
"pageName": "Family"
|
||||
},
|
||||
{
|
||||
"name": "Over18Filled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-15T15:16:55.869Z",
|
||||
"pageName": "Family"
|
||||
},
|
||||
{
|
||||
"name": "Parking",
|
||||
"description": "",
|
||||
@@ -1739,6 +1943,18 @@
|
||||
"created_at": "2021-01-11T13:37:55.726Z",
|
||||
"pageName": "Money"
|
||||
},
|
||||
{
|
||||
"name": "Scale",
|
||||
"description": "",
|
||||
"created_at": "2021-12-09T09:07:43.104Z",
|
||||
"pageName": "Building"
|
||||
},
|
||||
{
|
||||
"name": "ScaleFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-09T09:07:43.111Z",
|
||||
"pageName": "Building"
|
||||
},
|
||||
{
|
||||
"name": "SchoolBag",
|
||||
"description": "",
|
||||
@@ -1775,6 +1991,12 @@
|
||||
"created_at": "2021-01-11T13:37:55.582Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "SelfService",
|
||||
"description": "",
|
||||
"created_at": "2021-04-26T09:24:37.989Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "SelfServiceFilled",
|
||||
"description": "",
|
||||
@@ -1793,12 +2015,6 @@
|
||||
"created_at": "2021-04-26T09:24:37.982Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "SelfServiceStroke",
|
||||
"description": "",
|
||||
"created_at": "2021-04-26T09:24:37.989Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "Send",
|
||||
"description": "",
|
||||
@@ -1895,6 +2111,18 @@
|
||||
"created_at": "2021-01-28T14:00:38.604Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "Sightless",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.157Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "SightlessFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.106Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "SignLanguage",
|
||||
"description": "",
|
||||
@@ -2027,6 +2255,18 @@
|
||||
"created_at": "2020-07-01T10:37:42.766Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "SystemError",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.113Z",
|
||||
"pageName": "Device"
|
||||
},
|
||||
{
|
||||
"name": "SystemErrorFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.161Z",
|
||||
"pageName": "Device"
|
||||
},
|
||||
{
|
||||
"name": "SystemFilled",
|
||||
"description": "",
|
||||
@@ -2057,6 +2297,18 @@
|
||||
"created_at": "2021-01-21T12:56:37.968Z",
|
||||
"pageName": "File"
|
||||
},
|
||||
{
|
||||
"name": "Teddy",
|
||||
"description": "",
|
||||
"created_at": "2021-12-15T15:16:55.856Z",
|
||||
"pageName": "Family"
|
||||
},
|
||||
{
|
||||
"name": "TeddyFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-15T15:16:55.863Z",
|
||||
"pageName": "Family"
|
||||
},
|
||||
{
|
||||
"name": "Telephone",
|
||||
"description": "",
|
||||
@@ -2117,6 +2369,18 @@
|
||||
"created_at": "2021-03-29T09:45:27.057Z",
|
||||
"pageName": "Traffic"
|
||||
},
|
||||
{
|
||||
"name": "Umbrella",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.117Z",
|
||||
"pageName": "Pension"
|
||||
},
|
||||
{
|
||||
"name": "UmbrellaFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.121Z",
|
||||
"pageName": "Pension"
|
||||
},
|
||||
{
|
||||
"name": "Unlocked",
|
||||
"description": "",
|
||||
@@ -2261,6 +2525,30 @@
|
||||
"created_at": "2021-04-02T07:31:49.699Z",
|
||||
"pageName": "Family"
|
||||
},
|
||||
{
|
||||
"name": "Wireless",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.139Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "WirelessFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-11-16T15:09:19.131Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "Wrench",
|
||||
"description": "",
|
||||
"created_at": "2021-12-21T08:49:12.800Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "WrenchFilled",
|
||||
"description": "",
|
||||
"created_at": "2021-12-21T08:49:12.817Z",
|
||||
"pageName": "Settings"
|
||||
},
|
||||
{
|
||||
"name": "ZoomIn",
|
||||
"description": "",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "0.7.0",
|
||||
"version": "0.8.4",
|
||||
"private": false,
|
||||
"description": "NAVs egne ikoner i SVG og React format",
|
||||
"repository": {
|
||||
@@ -28,10 +28,8 @@
|
||||
"scripts": {
|
||||
"create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
|
||||
"create-icons": "svgr --out-dir src svg",
|
||||
"convert-icons": "node scripts/pngConverter.mjs",
|
||||
"clean": "rimraf src cjs esm png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
|
||||
"zip-icons": "node scripts/zipIcons.mjs",
|
||||
"build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons",
|
||||
"clean": "rimraf src cjs esm",
|
||||
"build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
|
||||
"update": "ts-node figma/index.ts dotenv/config"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -44,7 +42,9 @@
|
||||
"devDependencies": {
|
||||
"@svgr/cli": "^5.5.0",
|
||||
"@types/lodash.startcase": "^4.4.6",
|
||||
"@types/rimraf": "3.0.2",
|
||||
"@types/uuid": "^8.3.1",
|
||||
"axios": "^0.21.3",
|
||||
"copyfiles": "^2.4.1",
|
||||
"dotenv": "^10.0.0",
|
||||
"lodash.kebabcase": "^4.1.1",
|
||||
@@ -52,7 +52,6 @@
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"sharp": "0.29.1",
|
||||
"ts-node": "^10.4.0",
|
||||
"zip-dir": "^2.0.0"
|
||||
"ts-node": "^10.4.0"
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import { existsSync, mkdirSync, readdirSync } from "fs";
|
||||
import sharp from "sharp";
|
||||
import rimraf from "rimraf";
|
||||
import pLimit from "p-limit";
|
||||
|
||||
const convertToPng = async () => {
|
||||
const inputDir = "./svg/";
|
||||
const outDir = "./png/";
|
||||
const sizes = [16, 24, 128, 256];
|
||||
console.log("Converting icons to .png format");
|
||||
|
||||
const limit = pLimit(20);
|
||||
|
||||
if (existsSync(outDir)) {
|
||||
rimraf.sync(outDir);
|
||||
}
|
||||
mkdirSync(outDir);
|
||||
sizes.forEach((size) => mkdirSync(outDir + size.toString()));
|
||||
|
||||
await Promise.all(
|
||||
readdirSync(inputDir).map((file) => {
|
||||
return limit(() =>
|
||||
sizes.forEach((size) => {
|
||||
const density = (100 * size) / 16;
|
||||
sharp(inputDir + file, { density })
|
||||
.resize(size)
|
||||
.png()
|
||||
.toFile(outDir + size.toString() + "/" + file.replace("svg", "png"))
|
||||
.catch((e) => console.error(e));
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
console.log("Finished converting icons to .png format");
|
||||
};
|
||||
|
||||
try {
|
||||
convertToPng();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import zipdir from "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);
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="ds-icons/Kom i gang" />
|
||||
|
||||
# Ta i bruk ikonpakken `@navikt/ds-icons`
|
||||
|
||||
Alle ikoner kan bli funnet her https://design.nav.no/designsystem/resources/icons
|
||||
|
||||
## Oppsett
|
||||
|
||||
```bash
|
||||
yarn add @navikt/ds-icons
|
||||
```
|
||||
|
||||
```jsx
|
||||
Import { Expand } from `@navikt/ds-icons`;
|
||||
|
||||
<Expand
|
||||
title="Åpne meny"
|
||||
/>
|
||||
```
|
||||
|
||||
Note: Det kan være tilfeller der oppsettet ditt ikke har støtte for SVG, og det må da legges til manuelt i eks en webpack config basert på hva som blir brukt.
|
||||
@@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11515C20.7324 5.94459 20.7324 4.04674 19.4858 2.87619C18.2838 1.74743 16.3616 1.70712 15.1081 2.75525L14.9716 2.87619L3.6862 13.4736L3.52649 13.6301C1.61004 15.5902 1.66328 18.6389 3.6862 20.5385C5.70912 22.4381 8.95584 22.4881 11.0432 20.6885L11.2098 20.5385L22.4953 9.94113L24 11.3541L12.7146 21.9515L12.5304 22.1187C9.61022 24.6816 5.02951 24.6259 2.18147 21.9515C-0.666561 19.2771 -0.725895 14.9757 2.00347 12.2335L2.18147 12.0606L13.4669 1.4632C15.5445 -0.487732 18.913 -0.487732 20.9905 1.4632C23.0135 3.36279 23.0667 6.41157 21.1503 8.37164L20.9905 8.52814L9.7051 19.1255L9.56865 19.2465C8.31517 20.2946 6.39296 20.2543 5.19092 19.1255C3.98889 17.9968 3.94596 16.1918 5.06214 15.0147L5.19092 14.8866L16.4764 4.28917L17.9811 5.70216L6.69565 16.2996L6.61297 16.3867C6.28225 16.7789 6.30981 17.3502 6.69565 17.7126C7.08149 18.0749 7.68993 18.1008 8.10757 17.7902L8.20038 17.7126L19.4858 7.11515Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8634 1.00122C18.1639 0.974609 19.5426 1.3819 20.5704 2.35845C21.5981 3.33501 22.0267 4.64511 21.9987 5.88083C21.9709 7.10846 21.4908 8.35534 20.5704 9.22999L11.1693 18.163C10.6021 18.7019 9.81338 18.9683 9.05641 18.9838C8.29093 18.9995 7.45868 18.76 6.83035 18.163C6.20202 17.5659 5.95004 16.7751 5.96653 16.0478C5.98283 15.3285 6.26318 14.579 6.83035 14.0401L13.3388 7.85568C13.7382 7.47618 14.3857 7.47618 14.7851 7.85568C15.1845 8.23518 15.1845 8.85048 14.7851 9.22999L8.27667 15.4144C8.13723 15.5469 8.01819 15.7922 8.01145 16.0896C8.0049 16.3789 8.10622 16.6267 8.27667 16.7887C8.44712 16.9506 8.70788 17.0469 9.01237 17.0407C9.32537 17.0343 9.58355 16.9212 9.72299 16.7887L19.1241 7.85568C19.6168 7.38747 19.9355 6.64474 19.9538 5.83898C19.9719 5.0413 19.6939 4.27422 19.1241 3.73276C18.5542 3.19129 17.7469 2.92716 16.9075 2.94433C16.0595 2.96168 15.2778 3.26454 14.7851 3.73276L5.38403 12.6658C4.6945 13.321 4.13449 14.5364 4.05489 15.8977C3.9765 17.2386 4.37172 18.5754 5.38403 19.5373C7.5157 21.5628 10.484 21.5628 12.6156 19.5373L19.1519 13.3265C19.5513 12.947 20.1988 12.947 20.5982 13.3265C20.9976 13.706 20.9976 14.3213 20.5982 14.7008L14.0619 20.9116C11.1315 23.6961 6.86816 23.6961 3.93772 20.9116C2.41897 19.4685 1.91025 17.5412 2.01264 15.7899C2.11384 14.0591 2.81936 12.3541 3.93772 11.2914L13.3388 2.35845C14.2593 1.4838 15.5715 1.02766 16.8634 1.00122Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1503 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06214 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3472 0.00138792C17.7614 -0.0288776 19.2813 0.434034 20.4223 1.56794L19.3387 2.6448L20.4223 1.56794C21.5633 2.70184 22.0291 4.21243 21.9986 5.61786C21.9684 7.01063 21.4486 8.445 20.4223 9.46495L11.0314 18.7978C10.358 19.467 9.43759 19.7854 8.57056 19.8039C7.69079 19.8227 6.71672 19.5352 5.97471 18.7978C5.23271 18.0604 4.94338 17.0923 4.96233 16.218C4.981 15.3563 5.30134 14.4416 5.97472 13.7724L12.4761 7.31122C13.0746 6.71649 14.0448 6.71649 14.6433 7.31122C15.2417 7.90596 15.2417 8.87022 14.6433 9.46495L8.14185 15.9261C8.10938 15.9584 8.03076 16.083 8.02641 16.2836C8.02234 16.4715 8.08594 16.5885 8.14185 16.6441C8.19777 16.6996 8.31553 16.7628 8.50458 16.7588C8.70636 16.7545 8.83176 16.6763 8.86423 16.6441L18.2552 7.31122C18.6406 6.92821 18.9187 6.28392 18.9345 5.55228C18.9501 4.8333 18.71 4.17373 18.2552 3.72167C17.8003 3.26961 17.1366 3.03104 16.4132 3.04652C15.677 3.06227 15.0287 3.33865 14.6433 3.72167L5.25234 13.0545C4.67063 13.6326 4.14756 14.7746 4.07345 16.1004C4.00113 17.3941 4.36759 18.6364 5.25234 19.5157C7.18223 21.4337 9.82386 21.4337 11.7538 19.5157L18.2829 13.0269C18.8814 12.4322 19.8516 12.4322 20.4501 13.0269C21.0485 13.6216 21.0485 14.5859 20.4501 15.1806L13.9209 21.6694C10.7941 24.7769 6.21196 24.7769 3.0852 21.6694C1.44161 20.036 0.9051 17.8683 1.01337 15.9314C1.11986 14.0266 1.86096 12.1174 3.0852 10.9008L12.4761 1.56794C13.5024 0.547983 14.9457 0.0313808 16.3472 0.00138792Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1015 B After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM2 16H22V12H2V16ZM20 4V10C20 7.79086 18.2091 6 16 6H15C13.8053 6 12.7329 6.52376 12 7.35418C11.2671 6.52376 10.1947 6 9 6H8C5.79086 6 4 7.79086 4 10V4H20ZM16 8C17.1046 8 18 8.89543 18 10H13C13 8.89543 13.8954 8 15 8H16ZM9 8C10.1046 8 11 8.89543 11 10H6C6 8.89543 6.89543 8 8 8H9Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 587 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM17 7C19 7 20 8.89543 20 10H13C13 8.89543 14 7 16 7H17ZM8 7C10 7 11 8.89543 11 10H4C4 8.89543 5 7 7 7H8Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 412 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16115 3.8317L12 0L14.8388 3.8317C16.1005 5.53465 15.5894 7.95753 13.7473 9.00572C12.664 9.62217 11.336 9.62217 10.2527 9.00572C8.41059 7.95753 7.89946 5.53465 9.16115 3.8317ZM10.7682 5.0223L12 3.35964L13.2318 5.0223C13.7793 5.76126 13.5575 6.8126 12.7582 7.26743C12.2881 7.53493 11.7119 7.53493 11.2418 7.26743C10.4425 6.8126 10.2207 5.76126 10.7682 5.0223ZM3.14286 12C3.06396 12 3 12.064 3 12.1429V16.5C3 17.3284 3.67157 18 4.5 18C5.32843 18 6 17.3284 6 16.5V15C6 14.4477 6.44772 14 7 14C7.55228 14 8 14.4477 8 15V16.5C8 18.2632 6.69615 19.7219 5 19.9646V22H11.1707C11.0602 21.6872 11 21.3506 11 21V17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17V21C13 21.5523 13.4477 22 14 22C14.5523 22 15 21.5523 15 21V16V15C15 14.4477 15.4477 14 16 14C16.5523 14 17 14.4477 17 15V16C17 17.1046 17.8954 18 19 18C20.1046 18 21 17.1046 21 16V12.1429C21 12.064 20.936 12 20.8571 12H13H11H3.14286ZM17 21V19.4649C17.5883 19.8052 18.2714 20 19 20V22H16.8293C16.9398 21.6872 17 21.3506 17 21ZM21 22V19.4649C22.1956 18.7733 23 17.4806 23 16V12.1429C23 10.9594 22.0406 10 20.8571 10H13H11H3.14286C1.95939 10 1 10.9594 1 12.1429V16.5C1 17.8962 1.81753 19.1015 3 19.6632V22C3 23.1046 3.89543 24 5 24H14H19C20.1046 24 21 23.1046 21 22Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0L9.16115 3.8317C7.89946 5.53465 8.41059 7.95753 10.2527 9.00572C10.4916 9.14169 10.7425 9.24767 11 9.32366V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V9.32366C13.2575 9.24767 13.5084 9.14169 13.7473 9.00572C15.5894 7.95753 16.1005 5.53465 14.8388 3.8317L12 0ZM1 11.1429C1 11.064 1.06396 11 1.14286 11H22.8571C22.936 11 23 11.064 23 11.1429V16C23 17.1046 22 18 20 18C18 18 17 17.1046 17 16V15C17 14.4477 16.5523 14 16 14C15.4477 14 15 14.4477 15 15V21C15 21.5523 14.5523 22 14 22C13.4477 22 13 21.5523 13 21V17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17V21C11 23 11.5 23.5 12 24H4C3.44772 24 3 23.5523 3 23V19.9646C7 19.9646 8 18.2632 8 16.5V15C8 14.4477 7.55228 14 7 14C6.44772 14 6 14.4477 6 15V16.5C6 17.3284 5 18 3.5 18C2 18 1 17.3284 1 16.5V11.1429ZM17 21V19.4649C17.9112 19.9525 18.8223 19.9664 20.4899 19.9918C20.6525 19.9943 20.8223 19.9969 21 20V23C21 23.5523 20.5523 24 20 24H16C16.5 23.5 17 23 17 21Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 8.5C13.5449 8.5 15 7.04493 15 5.25C15 3.45507 13.5449 2 11.75 2C9.95504 2 8.49996 3.45507 8.49996 5.25C8.49996 7.04493 9.95504 8.5 11.75 8.5ZM11.75 10.5C14.6495 10.5 17 8.1495 17 5.25C17 2.35051 14.6495 0 11.75 0C8.85047 0 6.49996 2.35051 6.49996 5.25C6.49996 8.1495 8.85047 10.5 11.75 10.5ZM17.0996 13.9384C15.752 12.5057 13.8388 11.6111 11.7166 11.6111C7.63588 11.6111 4.32776 14.9192 4.32776 19H6.43887C6.43887 16.0852 8.80181 13.7222 11.7166 13.7222C13.2558 13.7222 14.6411 14.3811 15.6059 15.4322L17.0996 13.9384ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.534 16.1009C19.911 15.7239 20.5221 15.7239 20.8991 16.1009C21.276 16.4778 21.276 17.089 20.8991 17.4659ZM22.1847 18.7516L17.7673 23.169L13 24L13.831 19.2327L18.2484 14.8152C19.3354 13.7283 21.0977 13.7283 22.1847 14.8152C23.2717 15.9022 23.2717 17.6646 22.1847 18.7516Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7167 11.6111C13.8389 11.6111 15.752 12.5057 17.0997 13.9384L15.6059 15.4322C14.6412 14.3811 13.2559 13.7222 11.7167 13.7222C8.80187 13.7222 6.43893 16.0852 6.43893 19H4.32782C4.32782 14.9192 7.63594 11.6111 11.7167 11.6111ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.5341 16.1009C19.911 15.7239 20.5222 15.7239 20.8991 16.1009C21.2761 16.4778 21.2761 17.089 20.8991 17.4659ZM22.1848 18.7516L17.7674 23.169L13 24L13.831 19.2327L18.2485 14.8152C19.3354 13.7283 21.0978 13.7283 22.1848 14.8152C23.2718 15.9022 23.2718 17.6646 22.1848 18.7516Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -1,7 +1,7 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1_1873:555" fill="white">
|
||||
<mask id="path-1-inside-1_1873_555" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 9.44772 0 10 0H14C14.5523 0 15 0.447715 15 1V20H9V1ZM2 12C1.44772 12 1 12.4477 1 13V20H7V13C7 12.4477 6.55228 12 6 12H2ZM24 22H0V24H24V22ZM18 6C17.4477 6 17 6.44772 17 7V20H23V7C23 6.44772 22.5523 6 22 6H18Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 9.44772 0 10 0H14C14.5523 0 15 0.447715 15 1V20H9V1ZM2 12C1.44772 12 1 12.4477 1 13V20H7V13C7 12.4477 6.55228 12 6 12H2ZM24 22H0V24H24V22ZM18 6C17.4477 6 17 6.44772 17 7V20H23V7C23 6.44772 22.5523 6 22 6H18Z" fill="#262626"/>
|
||||
<path d="M15 20V22H17V20H15ZM9 20H7V22H9V20ZM1 20H-1V22H1V20ZM7 20V22H9V20H7ZM0 22V20H-2V22H0ZM24 22H26V20H24V22ZM0 24H-2V26H0V24ZM24 24V26H26V24H24ZM17 20H15V22H17V20ZM23 20V22H25V20H23ZM10 -2C8.34315 -2 7 -0.656854 7 1H11C11 1.55229 10.5523 2 10 2V-2ZM14 -2H10V2H14V-2ZM17 1C17 -0.656855 15.6569 -2 14 -2V2C13.4477 2 13 1.55229 13 1H17ZM17 20V1H13V20H17ZM9 22H15V18H9V22ZM7 1V20H11V1H7ZM3 13C3 13.5523 2.55229 14 2 14V10C0.343145 10 -1 11.3431 -1 13H3ZM3 20V13H-1V20H3ZM7 18H1V22H7V18ZM5 13V20H9V13H5ZM6 14C5.44771 14 5 13.5523 5 13H9C9 11.3431 7.65685 10 6 10V14ZM2 14H6V10H2V14ZM0 24H24V20H0V24ZM2 24V22H-2V24H2ZM24 22H0V26H24V22ZM22 22V24H26V22H22ZM19 7C19 7.55228 18.5523 8 18 8V4C16.3431 4 15 5.34315 15 7H19ZM19 20V7H15V20H19ZM23 18H17V22H23V18ZM21 7V20H25V7H21ZM22 8C21.4477 8 21 7.55229 21 7H25C25 5.34315 23.6569 4 22 4V8ZM18 8H22V4H18V8Z" fill="#262626" mask="url(#path-1-inside-1_1873:555)"/>
|
||||
<path d="M15 20V22H17V20H15ZM9 20H7V22H9V20ZM1 20H-1V22H1V20ZM7 20V22H9V20H7ZM0 22V20H-2V22H0ZM24 22H26V20H24V22ZM0 24H-2V26H0V24ZM24 24V26H26V24H24ZM17 20H15V22H17V20ZM23 20V22H25V20H23ZM10 -2C8.34315 -2 7 -0.656854 7 1H11C11 1.55229 10.5523 2 10 2V-2ZM14 -2H10V2H14V-2ZM17 1C17 -0.656855 15.6569 -2 14 -2V2C13.4477 2 13 1.55229 13 1H17ZM17 20V1H13V20H17ZM9 22H15V18H9V22ZM7 1V20H11V1H7ZM3 13C3 13.5523 2.55229 14 2 14V10C0.343145 10 -1 11.3431 -1 13H3ZM3 20V13H-1V20H3ZM7 18H1V22H7V18ZM5 13V20H9V13H5ZM6 14C5.44771 14 5 13.5523 5 13H9C9 11.3431 7.65685 10 6 10V14ZM2 14H6V10H2V14ZM0 24H24V20H0V24ZM2 24V22H-2V24H2ZM24 22H0V26H24V22ZM22 22V24H26V22H22ZM19 7C19 7.55228 18.5523 8 18 8V4C16.3431 4 15 5.34315 15 7H19ZM19 20V7H15V20H19ZM23 18H17V22H23V18ZM21 7V20H25V7H21ZM22 8C21.4477 8 21 7.55229 21 7H25C25 5.34315 23.6569 4 22 4V8ZM18 8H22V4H18V8Z" fill="#262626" mask="url(#path-1-inside-1_1873_555)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="6.5" cy="12" r="1.5" fill="#262626"/>
|
||||
<circle cx="12" cy="12" r="1.5" fill="#262626"/>
|
||||
<circle cx="17.5" cy="12" r="1.5" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 547 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM6.5 13.5C7.32843 13.5 8 12.8284 8 12C8 11.1716 7.32843 10.5 6.5 10.5C5.67157 10.5 5 11.1716 5 12C5 12.8284 5.67157 13.5 6.5 13.5ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM17.5 13.5C18.3284 13.5 19 12.8284 19 12C19 11.1716 18.3284 10.5 17.5 10.5C16.6716 10.5 16 11.1716 16 12C16 12.8284 16.6716 13.5 17.5 13.5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 698 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 12.8284 7.32843 13.5 6.5 13.5C5.67157 13.5 5 12.8284 5 12C5 11.1716 5.67157 10.5 6.5 10.5C7.32843 10.5 8 11.1716 8 12ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM17.5 13.5C18.3284 13.5 19 12.8284 19 12C19 11.1716 18.3284 10.5 17.5 10.5C16.6716 10.5 16 11.1716 16 12C16 12.8284 16.6716 13.5 17.5 13.5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 581 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM6.5 13.5C7.32843 13.5 8 12.8284 8 12C8 11.1716 7.32843 10.5 6.5 10.5C5.67157 10.5 5 11.1716 5 12C5 12.8284 5.67157 13.5 6.5 13.5ZM12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5ZM19 12C19 12.8284 18.3284 13.5 17.5 13.5C16.6716 13.5 16 12.8284 16 12C16 11.1716 16.6716 10.5 17.5 10.5C18.3284 10.5 19 11.1716 19 12Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 704 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C11.1716 8 10.5 7.32843 10.5 6.5C10.5 5.67157 11.1716 5 12 5C12.8284 5 13.5 5.67157 13.5 6.5C13.5 7.32843 12.8284 8 12 8ZM12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12C13.5 12.8284 12.8284 13.5 12 13.5ZM10.5 17.5C10.5 18.3284 11.1716 19 12 19C12.8284 19 13.5 18.3284 13.5 17.5C13.5 16.6716 12.8284 16 12 16C11.1716 16 10.5 16.6716 10.5 17.5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 581 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 1C24 0.447715 23.5523 -1.95703e-08 23 -4.37114e-08L1 -1.00536e-06C0.447716 -1.0295e-06 -1.95703e-08 0.447715 -4.37114e-08 0.999999L-1.00536e-06 23C-1.0295e-06 23.5523 0.447715 24 0.999999 24L23 24C23.5523 24 24 23.5523 24 23L24 1ZM10.5 6.5C10.5 7.32843 11.1716 8 12 8C12.8284 8 13.5 7.32843 13.5 6.5C13.5 5.67157 12.8284 5 12 5C11.1716 5 10.5 5.67157 10.5 6.5ZM10.5 12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12ZM12 19C11.1716 19 10.5 18.3284 10.5 17.5C10.5 16.6716 11.1716 16 12 16C12.8284 16 13.5 16.6716 13.5 17.5C13.5 18.3284 12.8284 19 12 19Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 815 B |
@@ -0,0 +1,10 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6836 0.585361C11.7435 0.401105 12.0041 0.401105 12.064 0.585362L12.5383 2.04506C12.5651 2.12746 12.6419 2.18325 12.7286 2.18325H14.2632C14.4569 2.18325 14.5375 2.43117 14.3807 2.54505L13.1391 3.44712C13.069 3.49805 13.0397 3.58833 13.0664 3.67074L13.5407 5.13034C13.6006 5.3146 13.3897 5.46783 13.233 5.35394L11.9914 4.45183C11.9213 4.4009 11.8263 4.4009 11.7563 4.45183L10.5146 5.35397C10.3578 5.46785 10.1469 5.31462 10.2068 5.13036L10.6811 3.67074C10.7079 3.58833 10.6785 3.49805 10.6084 3.44712L9.36682 2.54505C9.21008 2.43117 9.29063 2.18325 9.48438 2.18325H11.0191C11.1057 2.18325 11.1825 2.12746 11.2093 2.04506L11.6836 0.585361Z" fill="#262626"/>
|
||||
<path d="M3.72187 3.991C3.63391 3.81837 3.81823 3.63404 3.99086 3.72199L5.38403 4.43175C5.46122 4.47108 5.55497 4.45623 5.61623 4.39497L6.72162 3.28964C6.85862 3.15264 7.09089 3.271 7.06057 3.46236L6.81595 5.00634C6.80239 5.09192 6.84548 5.1765 6.92269 5.21584L8.31573 5.92562C8.48835 6.01358 8.44758 6.27105 8.25622 6.30136L6.71211 6.54594C6.62654 6.55949 6.55942 6.62661 6.54587 6.71219L6.30129 8.25637C6.27098 8.44773 6.01351 8.48851 5.92555 8.31588L5.21577 6.92284C5.17643 6.84564 5.09185 6.80254 5.00627 6.8161L3.46232 7.06072C3.27095 7.09104 3.1526 6.85877 3.2896 6.72177L4.39497 5.61639C4.45624 5.55513 4.47109 5.46137 4.43175 5.38417L3.72187 3.991Z" fill="#262626"/>
|
||||
<path d="M0.585361 12.2186C0.401105 12.1587 0.401105 11.898 0.585362 11.8381L2.15739 11.3273C2.23979 11.3005 2.29558 11.2238 2.29558 11.1371V9.48437C2.29558 9.29062 2.54351 9.21007 2.65739 9.36682L3.62879 10.704C3.67971 10.7741 3.76999 10.8034 3.8524 10.7767L5.42439 10.2659C5.60866 10.206 5.76189 10.4169 5.64799 10.5737L4.6764 11.9108C4.62546 11.9809 4.62546 12.0758 4.6764 12.1459L5.64802 13.4831C5.76191 13.6398 5.60869 13.8507 5.42442 13.7909L3.85239 13.2801C3.76999 13.2533 3.67971 13.2827 3.62879 13.3528L2.65739 14.6899C2.54351 14.8467 2.29558 14.7661 2.29558 14.5724V12.9196C2.29558 12.8329 2.23979 12.7562 2.15739 12.7294L0.585361 12.2186Z" fill="#262626"/>
|
||||
<path d="M3.99086 20.0891C3.81823 20.177 3.63391 19.9927 3.72186 19.8201L4.43169 18.4269C4.47103 18.3497 4.45618 18.2559 4.39492 18.1947L3.28959 17.0893C3.15259 16.9523 3.27096 16.72 3.46232 16.7503L5.00638 16.995C5.09197 17.0086 5.17655 16.9655 5.21589 16.8883L5.92553 15.4953C6.01348 15.3226 6.27096 15.3634 6.30128 15.5548L6.54591 17.0989C6.55947 17.1845 6.62659 17.2516 6.71216 17.2651L8.25628 17.5097C8.44763 17.54 8.48841 17.7975 8.31579 17.8854L6.92289 18.5952C6.8457 18.6346 6.80261 18.7191 6.81616 18.8047L7.06069 20.3488C7.09099 20.5401 6.85872 20.6585 6.72173 20.5215L5.61627 19.416C5.55501 19.3548 5.46126 19.3399 5.38406 19.3793L3.99086 20.0891Z" fill="#262626"/>
|
||||
<path d="M12.064 23.1204C12.0041 23.3047 11.7435 23.3047 11.6836 23.1205L11.2092 21.6608C11.1824 21.5784 11.1056 21.5226 11.019 21.5226H9.4844C9.29066 21.5226 9.2101 21.2746 9.36685 21.1608L10.6085 20.2587C10.6786 20.2078 10.7079 20.1175 10.6812 20.0351L10.2068 18.5756C10.1469 18.3914 10.3578 18.2381 10.5146 18.352L11.7563 19.254C11.8264 19.3049 11.9213 19.3049 11.9914 19.254L13.233 18.352C13.3897 18.2381 13.6006 18.3914 13.5407 18.5756L13.0665 20.0351C13.0397 20.1175 13.069 20.2078 13.1391 20.2587L14.3807 21.1608C14.5375 21.2746 14.4569 21.5226 14.2632 21.5226H12.7285C12.6418 21.5226 12.565 21.5784 12.5383 21.6608L12.064 23.1204Z" fill="#262626"/>
|
||||
<path d="M20.0891 19.8201C20.177 19.9928 19.9927 20.1771 19.8201 20.0892L18.427 19.3794C18.3498 19.3401 18.2561 19.3549 18.1948 19.4162L17.0893 20.5217C16.9523 20.6587 16.72 20.5403 16.7503 20.3489L16.995 18.8047C17.0085 18.7191 16.9654 18.6345 16.8882 18.5952L15.4953 17.8855C15.3227 17.7975 15.3634 17.54 15.5548 17.5097L17.0989 17.2652C17.1845 17.2516 17.2516 17.1845 17.2651 17.0989L17.5097 15.5548C17.54 15.3634 17.7975 15.3226 17.8854 15.4953L18.5952 16.8883C18.6345 16.9655 18.7191 17.0086 18.8047 16.9951L20.3487 16.7504C20.5401 16.72 20.6584 16.9523 20.5214 17.0893L19.416 18.1949C19.3547 18.2562 19.3399 18.3499 19.3792 18.4271L20.0891 19.8201Z" fill="#262626"/>
|
||||
<path d="M23.4144 11.8382C23.5987 11.8981 23.5987 12.1588 23.4145 12.2187L21.8424 12.7295C21.76 12.7563 21.7042 12.8331 21.7042 12.9197V14.5726C21.7042 14.7663 21.4563 14.8469 21.3424 14.6901L20.3709 13.3528C20.3199 13.2827 20.2297 13.2534 20.1473 13.2802L18.5754 13.791C18.3912 13.8508 18.2379 13.64 18.3518 13.4832L19.3233 12.146C19.3743 12.0759 19.3743 11.981 19.3233 11.9109L18.3518 10.5737C18.2379 10.4169 18.3912 10.206 18.5754 10.2659L20.1473 10.7767C20.2297 10.8035 20.32 10.7742 20.371 10.7041L21.3424 9.36682C21.4563 9.21007 21.7042 9.29062 21.7042 9.48437V11.1373C21.7042 11.2239 21.76 11.3007 21.8424 11.3275L23.4144 11.8382Z" fill="#262626"/>
|
||||
<path d="M19.82 3.72203C19.9927 3.63407 20.177 3.8184 20.089 3.99102L19.3792 5.38419C19.3399 5.46139 19.3547 5.55514 19.416 5.61641L20.5214 6.72179C20.6584 6.85879 20.54 7.09107 20.3487 7.06075L18.8045 6.81606C18.719 6.8025 18.6344 6.8456 18.595 6.92281L17.8854 8.31578C17.7975 8.48842 17.54 8.44765 17.5097 8.25629L17.2651 6.71221C17.2515 6.62664 17.1844 6.55952 17.0988 6.54596L15.5547 6.30132C15.3634 6.271 15.3226 6.01354 15.4952 5.92558L16.8882 5.21585C16.9654 5.17652 17.0085 5.09194 16.9949 5.00635L16.7503 3.46238C16.72 3.27102 16.9522 3.15266 17.0892 3.28965L18.1948 4.39506C18.2561 4.45632 18.3498 4.47116 18.427 4.43183L19.82 3.72203Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM11.6942 1.58536C11.754 1.4011 12.0147 1.40111 12.0746 1.58536L12.4898 2.86313C12.5166 2.94553 12.5934 3.00132 12.68 3.00132H14.0233C14.2171 3.00132 14.2976 3.24925 14.1409 3.36313L13.054 4.15276C12.9839 4.20369 12.9546 4.29397 12.9814 4.37637L13.3966 5.65405C13.4564 5.83831 13.2455 5.99154 13.0888 5.87766L12.0019 5.08798C11.9318 5.03705 11.8369 5.03705 11.7668 5.08798L10.6799 5.87768C10.5231 5.99156 10.3123 5.83833 10.3721 5.65407L10.7873 4.37637C10.8141 4.29397 10.7848 4.20369 10.7147 4.15276L9.6278 3.36313C9.47105 3.24925 9.55161 3.00132 9.74535 3.00132H11.0888C11.1754 3.00132 11.2522 2.94553 11.279 2.86313L11.6942 1.58536ZM4.704 4.43512C4.53138 4.34717 4.34706 4.5315 4.43502 4.70413L5.05696 5.92473C5.0963 6.00193 5.08145 6.09568 5.02018 6.15695L4.05175 7.12538C3.91475 7.26238 4.03311 7.49465 4.22447 7.46433L5.57715 7.25002C5.66273 7.23646 5.74731 7.27955 5.78664 7.35676L6.40849 8.57722C6.49645 8.74985 6.75392 8.70907 6.78423 8.51772L6.99851 7.16483C7.01207 7.07925 7.07919 7.01213 7.16476 6.99858L8.51758 6.7843C8.70894 6.75399 8.74972 6.49652 8.57709 6.40856L7.35662 5.78671C7.27941 5.74737 7.23632 5.66279 7.24988 5.57721L7.4642 4.22451C7.49452 4.03315 7.26225 3.91479 7.12524 4.05178L6.1568 5.02018C6.09553 5.08144 6.00179 5.09629 5.92459 5.05696L4.704 4.43512ZM1.58536 12.2163C1.40111 12.1564 1.40111 11.8957 1.58536 11.8358L2.9661 11.3872C3.0485 11.3604 3.10429 11.2836 3.10429 11.197V9.74534C3.10429 9.55159 3.35223 9.47104 3.4661 9.6278L4.31929 10.8023C4.37021 10.8724 4.46049 10.9017 4.5429 10.8749L5.9236 10.4263C6.10787 10.3664 6.26109 10.5773 6.1472 10.7341L5.29384 11.9085C5.24291 11.9786 5.24291 12.0735 5.29384 12.1436L6.14722 13.3181C6.26111 13.4748 6.10789 13.6857 5.92363 13.6258L4.5429 13.1772C4.46049 13.1505 4.37022 13.1798 4.31929 13.2499L3.4661 14.4243C3.35222 14.5811 3.10429 14.5005 3.10429 14.3068V12.8551C3.10429 12.7685 3.0485 12.6917 2.9661 12.6649L1.58536 12.2163ZM4.43501 19.1228C4.34705 19.2954 4.53138 19.4798 4.704 19.3918L5.92462 18.7699C6.00182 18.7306 6.09557 18.7454 6.15684 18.8067L7.12535 19.7752C7.26234 19.9122 7.49461 19.7938 7.46431 19.6025L7.25008 18.2497C7.23652 18.1641 7.27961 18.0796 7.35681 18.0402L8.57716 17.4184C8.74977 17.3304 8.70899 17.0729 8.51764 17.0426L7.1648 16.8283C7.07923 16.8148 7.01212 16.7477 6.99856 16.6621L6.78423 15.3093C6.75391 15.1179 6.49643 15.0771 6.40848 15.2498L5.78675 16.4702C5.74742 16.5474 5.66283 16.5905 5.57724 16.577L4.22447 16.3626C4.03311 16.3323 3.91475 16.5645 4.05174 16.7015L5.02013 17.67C5.0814 17.7312 5.09624 17.825 5.05691 17.9022L4.43501 19.1228ZM12.0746 22.1451C12.0147 22.3293 11.754 22.3293 11.6942 22.1451L11.2789 20.8673C11.2521 20.7849 11.1753 20.7291 11.0887 20.7291H9.74537C9.55163 20.7291 9.47107 20.4812 9.62782 20.3673L10.7147 19.5777C10.7848 19.5268 10.8142 19.4365 10.7874 19.3541L10.3722 18.0765C10.3123 17.8923 10.5232 17.739 10.6799 17.8529L11.7668 18.6425C11.8369 18.6934 11.9318 18.6934 12.0019 18.6425L13.0888 17.8529C13.2455 17.739 13.4564 17.8923 13.3965 18.0765L12.9814 19.3541C12.9546 19.4365 12.9839 19.5268 13.054 19.5777L14.1409 20.3673C14.2976 20.4812 14.2171 20.7291 14.0233 20.7291H12.6799C12.5933 20.7291 12.5165 20.7849 12.4897 20.8673L12.0746 22.1451ZM19.1228 19.3919C19.2954 19.4798 19.4798 19.2955 19.3918 19.1229L18.7699 17.9024C18.7305 17.8252 18.7454 17.7314 18.8066 17.6702L19.7752 16.7016C19.9121 16.5646 19.7938 16.3323 19.6024 16.3626L18.2497 16.577C18.1641 16.5905 18.0795 16.5475 18.0402 16.4702L17.4184 15.2498C17.3304 15.0771 17.0729 15.1179 17.0426 15.3093L16.8283 16.6621C16.8148 16.7477 16.7477 16.8148 16.6621 16.8284L15.3093 17.0426C15.1179 17.073 15.0772 17.3304 15.2498 17.4184L16.4702 18.0402C16.5474 18.0795 16.5905 18.1641 16.5769 18.2497L16.3626 19.6026C16.3322 19.794 16.5645 19.9123 16.7015 19.7753L17.6701 18.8068C17.7313 18.7456 17.8251 18.7307 17.9023 18.77L19.1228 19.3919ZM22.4146 11.8359C22.5988 11.8958 22.5988 12.1565 22.4146 12.2164L21.0338 12.665C20.9514 12.6918 20.8956 12.7686 20.8956 12.8552V14.3069C20.8956 14.5007 20.6477 14.5812 20.5338 14.4245L19.6805 13.25C19.6296 13.1798 19.5393 13.1505 19.4569 13.1773L18.0763 13.6259C17.8921 13.6858 17.7389 13.4749 17.8527 13.3182L18.706 12.1437C18.757 12.0736 18.757 11.9787 18.706 11.9086L17.8527 10.7341C17.7388 10.5773 17.8921 10.3664 18.0763 10.4263L19.457 10.875C19.5394 10.9017 19.6297 10.8724 19.6806 10.8023L20.5338 9.6278C20.6477 9.47104 20.8956 9.55159 20.8956 9.74534V11.1971C20.8956 11.2838 20.9514 11.3605 21.0338 11.3873L22.4146 11.8359ZM19.3918 4.70416C19.4797 4.53153 19.2954 4.34721 19.1228 4.43517L17.9023 5.05703C17.8251 5.09637 17.7314 5.08152 17.6701 5.02027L16.7015 4.05179C16.5645 3.9148 16.3322 4.03316 16.3625 4.22452L16.5769 5.57722C16.5904 5.6628 16.5473 5.74738 16.4701 5.78672L15.2497 6.40853C15.0771 6.49648 15.1179 6.75395 15.3092 6.78427L16.6621 6.9986C16.7476 7.01216Line truncated
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H12V20H4V2H12V7H17V14H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 445 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0V22H11.5L14.5 19L11 15.5L14.5 12L18 15.5L19 14.5V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 448 B |
@@ -1,4 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 23V10C2 9.44772 2.44772 9 3 9H11.5556C12.1078 9 12.5556 9.44772 12.5556 10V12H21C21.5523 12 22 12.4477 22 13V23C22 23.5523 21.5523 24 21 24H3C2.44772 24 2 23.5523 2 23Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H20V10H14V9C14 7.89543 13.1046 7 12 7H4V0ZM8 5H16V3H8V5Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H4V7H12C13.1046 7 14 7.89543 14 9V10H20V0ZM16 5H8V3H16V5ZM2 10V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V13C22 12.4477 21.5523 12 21 12H12.5556V10C12.5556 9.44772 12.1078 9 11.5556 9H3C2.44772 9 2 9.44772 2 10Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 430 B After Width: | Height: | Size: 404 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 22V0H14.5L19 4.5V11H17.3135C11.6605 11 8.31543 17.3293 11.5 22H2ZM13.5 2V5H16.5L13.5 2ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 645 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H14.4142L19 4.58579V16H17V7H12V2H4V20H11V22H2V0ZM14 2.41421L16.5858 5H14V2.41421ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 369 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0V22H12L10 19.5L14 16L16 18L19 15V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 356 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H12V7H17V11H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 645 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.34783 12.9348V12.5015L9.03177 12.2052L1 4.67546L0.316059 5.405L1 4.67546V3.5H23V4.69448L15.4668 12.2277L15.1739 12.5206V12.9348L15.1739 21.5495L9.34783 23.0384V12.9348Z" stroke="#262626" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 321 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 3V4.17546C0 4.45187 0.114409 4.71595 0.316059 4.905L8.34783 12.4348V22.5384C8.34783 23.1911 8.96302 23.6689 9.59542 23.5073L15.4215 22.0184C15.8642 21.9052 16.1739 21.5064 16.1739 21.0495V12.4348L23.7071 4.90159C23.8946 4.71405 24 4.4597 24 4.19448V3C24 2.44772 23.5523 2 23 2H1C0.447715 2 0 2.44772 0 3Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 438 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5857 5L12.2928 10.2929L13.707 11.7071L19 6.41412V11H21V3H13V5L17.5857 5ZM5 13V17.5859L10.293 12.2929L11.7072 13.7071L6.4143 19H11V21H3V13H5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 315 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM12.2928 10.2929L17.5857 5L13 5V3H21V11H19V6.41412L13.707 11.7071L12.2928 10.2929ZM5 17.5859V13H3V21H11V19H6.4143L11.7072 13.7071L10.293 12.2929L5 17.5859Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 449 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.414 8.99999L21.7068 3.7071L20.2926 2.29288L14.9999 7.58561V2.99999H12.9999V11H20.9999V8.99999H16.414ZM7.58562 15L2.29272 20.2929L3.70694 21.7071L8.99991 16.4141L8.99991 21H10.9999L10.9999 13L2.99991 13L2.99991 15L7.58562 15Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 399 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM21.7068 3.70709L16.414 8.99998H20.9999V11H12.9999V2.99998H14.9999V7.5856L20.2926 2.29288L21.7068 3.70709ZM2.29272 20.2929L7.58562 15L2.99991 15L2.99991 13L10.9999 13L10.9999 21H8.99991V16.4141L3.70694 21.7071L2.29272 20.2929Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 520 B |
@@ -1,7 +1,7 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1_1873:540" fill="white">
|
||||
<mask id="path-1-inside-1_1873_540" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4941 0C12.6652 0 11.9931 0.672023 11.9931 1.501V9H14.9951V1.501C14.9951 0.672023 14.3231 0 13.4941 0ZM9.49146 1C8.66248 1 7.99045 1.67202 7.99045 2.501V9H10.9925V2.501C10.9925 1.67202 10.3204 1 9.49146 1ZM21.9998 13V10H7.99045V11L21.9998 13ZM2.3963 12.0974C1.8679 11.569 1.8679 10.7123 2.3963 10.1839C3.45309 9.12709 5.16648 9.12709 6.22327 10.1839L7.98865 11.9493L5.11842 14.8195L2.3963 12.0974ZM15.9958 2.501C15.9958 1.67202 16.6678 1 17.4968 1C18.3258 1 18.9978 1.67202 18.9978 2.501V9H15.9958V2.501ZM20.9992 3C20.4465 3 19.9985 3.44801 19.9985 4.00067V9H21.9998V4.00067C21.9998 3.44801 21.5518 3 20.9992 3ZM5.83276 15.8438L8.99112 20L18.3064 19.2839C20.3905 19.1237 21.9998 17.3859 21.9998 15.2957V14L8.99112 12.2344L5.83276 15.8438ZM19.9985 20L8.99112 21V24H19.9985V20Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4941 0C12.6652 0 11.9931 0.672023 11.9931 1.501V9H14.9951V1.501C14.9951 0.672023 14.3231 0 13.4941 0ZM9.49146 1C8.66248 1 7.99045 1.67202 7.99045 2.501V9H10.9925V2.501C10.9925 1.67202 10.3204 1 9.49146 1ZM21.9998 13V10H7.99045V11L21.9998 13ZM2.3963 12.0974C1.8679 11.569 1.8679 10.7123 2.3963 10.1839C3.45309 9.12709 5.16648 9.12709 6.22327 10.1839L7.98865 11.9493L5.11842 14.8195L2.3963 12.0974ZM15.9958 2.501C15.9958 1.67202 16.6678 1 17.4968 1C18.3258 1 18.9978 1.67202 18.9978 2.501V9H15.9958V2.501ZM20.9992 3C20.4465 3 19.9985 3.44801 19.9985 4.00067V9H21.9998V4.00067C21.9998 3.44801 21.5518 3 20.9992 3ZM5.83276 15.8438L8.99112 20L18.3064 19.2839C20.3905 19.1237 21.9998 17.3859 21.9998 15.2957V14L8.99112 12.2344L5.83276 15.8438ZM19.9985 20L8.99112 21V24H19.9985V20Z" fill="#262626"/>
|
||||
<path d="M11.9931 9H9.99313V11H11.9931V9ZM14.9951 9V11H16.9951V9H14.9951ZM7.99045 9H5.99045V11H7.99045V9ZM10.9925 9V11H12.9925V9H10.9925ZM21.9998 10H23.9998V8H21.9998V10ZM21.9998 13L21.7172 14.9799L23.9998 15.3058V13H21.9998ZM7.99045 10V8H5.99045V10H7.99045ZM7.99045 11H5.99045V12.7348L7.7078 12.9799L7.99045 11ZM2.3963 10.1839L0.982083 8.76966L0.982082 8.76967L2.3963 10.1839ZM2.3963 12.0974L3.81051 10.6832L3.81051 10.6832L2.3963 12.0974ZM6.22327 10.1839L7.63749 8.76967L6.22327 10.1839ZM7.98865 11.9493L9.40287 13.3635L10.8171 11.9493L9.40287 10.535L7.98865 11.9493ZM5.11842 14.8195L3.70421 16.2337L5.11842 17.6479L6.53264 16.2337L5.11842 14.8195ZM18.9978 9V11H20.9978V9H18.9978ZM15.9958 9H13.9958V11H15.9958V9ZM19.9985 9H17.9985V11H19.9985V9ZM21.9998 9V11H23.9998V9H21.9998ZM8.99112 20L7.39873 21.2101L8.05799 22.0776L9.14441 21.9941L8.99112 20ZM5.83276 15.8438L4.32764 14.5267L3.25312 15.7547L4.24036 17.0538L5.83276 15.8438ZM18.3064 19.2839L18.1531 17.2898H18.1531L18.3064 19.2839ZM21.9998 14H23.9998V12.2531L22.2688 12.0182L21.9998 14ZM8.99112 12.2344L9.26011 10.2525L8.1943 10.1079L7.486 10.9173L8.99112 12.2344ZM8.99112 21L8.81017 19.0082L6.99112 19.1735V21H8.99112ZM19.9985 20H21.9985V17.8101L19.8175 18.0082L19.9985 20ZM8.99112 24H6.99112V26H8.99112V24ZM19.9985 24V26H21.9985V24H19.9985ZM13.9931 1.501C13.9931 1.77659 13.7697 2 13.4941 2V-2C11.5606 -2 9.99313 -0.432547 9.99313 1.501H13.9931ZM13.9931 9V1.501H9.99313V9H13.9931ZM14.9951 7H11.9931V11H14.9951V7ZM12.9951 1.501V9H16.9951V1.501H12.9951ZM13.4941 2C13.2185 2 12.9951 1.77659 12.9951 1.501H16.9951C16.9951 -0.432546 15.4277 -2 13.4941 -2V2ZM9.99045 2.501C9.99045 2.77659 9.76705 3 9.49146 3V-1C7.55791 -1 5.99045 0.567453 5.99045 2.501H9.99045ZM9.99045 9V2.501H5.99045V9H9.99045ZM10.9925 7H7.99045V11H10.9925V7ZM8.99246 2.501V9H12.9925V2.501H8.99246ZM9.49146 3C9.21587 3 8.99246 2.77659 8.99246 2.501H12.9925C12.9925 0.567452 11.425 -1 9.49146 -1V3ZM19.9998 10V13H23.9998V10H19.9998ZM7.99045 12H21.9998V8H7.99045V12ZM9.99045 11V10H5.99045V11H9.99045ZM22.2825 11.0201L8.27311 9.02007L7.7078 12.9799L21.7172 14.9799L22.2825 11.0201ZM0.982082 8.76967C-0.327358 10.0791 -0.327363 12.2021 0.982083 13.5116L3.81051 10.6832C4.06317 10.9358 4.06316 11.3454 3.81051 11.5981L0.982082 8.76967ZM7.63749 8.76967C5.79965 6.93183 2.81992 6.93183 0.982083 8.76966L3.81051 11.5981C4.08625 11.3224 4.53332 11.3224 4.80906 11.5981L7.63749 8.76967ZM9.40287 10.535L7.63749 8.76967L4.80906 11.5981L6.57444 13.3635L9.40287 10.535ZM6.53264 16.2337L9.40287 13.3635L6.57444 10.535L3.70421 13.4053L6.53264 16.2337ZM0.982082 13.5116L3.70421 16.2337L6.53264 13.4053L3.81051 10.6832L0.982082 13.5116ZM17.4968 -1C15.5633 -1 13.9958 0.567453 13.9958 2.501H17.9958C17.9958 2.77659 17.7724 3 17.4968 3V-1ZM20.9978 2.501C20.9978 0.567454 19.4304 -1 17.4968 -1V3C17.2212 3 16.9978 2.77659 16.9978 2.501H20.9978ZM20.9978 9V2.501H16.9978V9H20.9978ZM15.9958 11H18.9978V7H15.9958V11ZM13.9958 2.501V9H17.9958V2.501H13.9958ZM21.9985 4.00067C21.9985 4.55258 21.5511 5 20.9992 5V1C19.3419 1 17.9985 2.34345 17.9985 4.00067H21.9985ZM21.9985 9V4.00067H17.9985V9H21.9985ZM21.9998 7H19.9985V11H21.9998V7ZM19.9998 4.00067V9H23.9998V4.00067H19.9998ZM20.9992 5C20.4472 5 19.9998 4.55258 19.9998 4.00067H23.9998C23.9998 2.34345 22.6564 1 20.9992 1V5ZM10.5835 18.7899L7.42516 14.6337L4.24036 17.0538L7.39873 21.2101L10.5835 18.7899ZM18.1531 17.2898L8.83783 18.0059L9.14441 21.9941L18.4597 21.278L18.1531 17.2898ZM19.9998 15.2957C19.9998 16.3408 19.1952 17.2097 18.1531 17.2898L18.4597 21.278C21.5858 21.0377 23.9998 18.431 23.9998 15.2957H19.9998ZM19.9998 14V15.2957H23.9998V14H19.9998ZM8.72214 14.2162L21.7308 15.9818L22.2688 12.0182L9.26011 10.2525L8.72214 14.2162ZM7.33788 17.1608L10.4962 13.5514L7.486 10.9173L4.32764 14.5267L7.33788 17.1608ZM9.17208 22.9918L20.1794 21.9918L19.8175 18.0082L8.81017 19.0082L9.17208 22.9918ZM10.9911 24V21H6.99112V24H10.9911ZM19.9985 22H8.99112V26H19.9985V22ZM17.9985 20V24H21.9985V20H17.9985Z" fill="#262626" mask="url(#path-1-inside-1_1873:540)"/>
|
||||
<path d="M11.9931 9H9.99313V11H11.9931V9ZM14.9951 9V11H16.9951V9H14.9951ZM7.99045 9H5.99045V11H7.99045V9ZM10.9925 9V11H12.9925V9H10.9925ZM21.9998 10H23.9998V8H21.9998V10ZM21.9998 13L21.7172 14.9799L23.9998 15.3058V13H21.9998ZM7.99045 10V8H5.99045V10H7.99045ZM7.99045 11H5.99045V12.7348L7.7078 12.9799L7.99045 11ZM2.3963 10.1839L0.982083 8.76966L0.982082 8.76967L2.3963 10.1839ZM2.3963 12.0974L3.81051 10.6832L3.81051 10.6832L2.3963 12.0974ZM6.22327 10.1839L7.63749 8.76967L6.22327 10.1839ZM7.98865 11.9493L9.40287 13.3635L10.8171 11.9493L9.40287 10.535L7.98865 11.9493ZM5.11842 14.8195L3.70421 16.2337L5.11842 17.6479L6.53264 16.2337L5.11842 14.8195ZM18.9978 9V11H20.9978V9H18.9978ZM15.9958 9H13.9958V11H15.9958V9ZM19.9985 9H17.9985V11H19.9985V9ZM21.9998 9V11H23.9998V9H21.9998ZM8.99112 20L7.39873 21.2101L8.05799 22.0776L9.14441 21.9941L8.99112 20ZM5.83276 15.8438L4.32764 14.5267L3.25312 15.7547L4.24036 17.0538L5.83276 15.8438ZM18.3064 19.2839L18.1531 17.2898H18.1531L18.3064 19.2839ZM21.9998 14H23.9998V12.2531L22.2688 12.0182L21.9998 14ZM8.99112 12.2344L9.26011 10.2525L8.1943 10.1079L7.486 10.9173L8.99112 12.2344ZM8.99112 21L8.81017 19.0082L6.99112 19.1735V21H8.99112ZM19.9985 20H21.9985V17.8101L19.8175 18.0082L19.9985 20ZM8.99112 24H6.99112V26H8.99112V24ZM19.9985 24V26H21.9985V24H19.9985ZM13.9931 1.501C13.9931 1.77659 13.7697 2 13.4941 2V-2C11.5606 -2 9.99313 -0.432547 9.99313 1.501H13.9931ZM13.9931 9V1.501H9.99313V9H13.9931ZM14.9951 7H11.9931V11H14.9951V7ZM12.9951 1.501V9H16.9951V1.501H12.9951ZM13.4941 2C13.2185 2 12.9951 1.77659 12.9951 1.501H16.9951C16.9951 -0.432546 15.4277 -2 13.4941 -2V2ZM9.99045 2.501C9.99045 2.77659 9.76705 3 9.49146 3V-1C7.55791 -1 5.99045 0.567453 5.99045 2.501H9.99045ZM9.99045 9V2.501H5.99045V9H9.99045ZM10.9925 7H7.99045V11H10.9925V7ZM8.99246 2.501V9H12.9925V2.501H8.99246ZM9.49146 3C9.21587 3 8.99246 2.77659 8.99246 2.501H12.9925C12.9925 0.567452 11.425 -1 9.49146 -1V3ZM19.9998 10V13H23.9998V10H19.9998ZM7.99045 12H21.9998V8H7.99045V12ZM9.99045 11V10H5.99045V11H9.99045ZM22.2825 11.0201L8.27311 9.02007L7.7078 12.9799L21.7172 14.9799L22.2825 11.0201ZM0.982082 8.76967C-0.327358 10.0791 -0.327363 12.2021 0.982083 13.5116L3.81051 10.6832C4.06317 10.9358 4.06316 11.3454 3.81051 11.5981L0.982082 8.76967ZM7.63749 8.76967C5.79965 6.93183 2.81992 6.93183 0.982083 8.76966L3.81051 11.5981C4.08625 11.3224 4.53332 11.3224 4.80906 11.5981L7.63749 8.76967ZM9.40287 10.535L7.63749 8.76967L4.80906 11.5981L6.57444 13.3635L9.40287 10.535ZM6.53264 16.2337L9.40287 13.3635L6.57444 10.535L3.70421 13.4053L6.53264 16.2337ZM0.982082 13.5116L3.70421 16.2337L6.53264 13.4053L3.81051 10.6832L0.982082 13.5116ZM17.4968 -1C15.5633 -1 13.9958 0.567453 13.9958 2.501H17.9958C17.9958 2.77659 17.7724 3 17.4968 3V-1ZM20.9978 2.501C20.9978 0.567454 19.4304 -1 17.4968 -1V3C17.2212 3 16.9978 2.77659 16.9978 2.501H20.9978ZM20.9978 9V2.501H16.9978V9H20.9978ZM15.9958 11H18.9978V7H15.9958V11ZM13.9958 2.501V9H17.9958V2.501H13.9958ZM21.9985 4.00067C21.9985 4.55258 21.5511 5 20.9992 5V1C19.3419 1 17.9985 2.34345 17.9985 4.00067H21.9985ZM21.9985 9V4.00067H17.9985V9H21.9985ZM21.9998 7H19.9985V11H21.9998V7ZM19.9998 4.00067V9H23.9998V4.00067H19.9998ZM20.9992 5C20.4472 5 19.9998 4.55258 19.9998 4.00067H23.9998C23.9998 2.34345 22.6564 1 20.9992 1V5ZM10.5835 18.7899L7.42516 14.6337L4.24036 17.0538L7.39873 21.2101L10.5835 18.7899ZM18.1531 17.2898L8.83783 18.0059L9.14441 21.9941L18.4597 21.278L18.1531 17.2898ZM19.9998 15.2957C19.9998 16.3408 19.1952 17.2097 18.1531 17.2898L18.4597 21.278C21.5858 21.0377 23.9998 18.431 23.9998 15.2957H19.9998ZM19.9998 14V15.2957H23.9998V14H19.9998ZM8.72214 14.2162L21.7308 15.9818L22.2688 12.0182L9.26011 10.2525L8.72214 14.2162ZM7.33788 17.1608L10.4962 13.5514L7.486 10.9173L4.32764 14.5267L7.33788 17.1608ZM9.17208 22.9918L20.1794 21.9918L19.8175 18.0082L8.81017 19.0082L9.17208 22.9918ZM10.9911 24V21H6.99112V24H10.9911ZM19.9985 22H8.99112V26H19.9985V22ZM17.9985 20V24H21.9985V20H17.9985Z" fill="#262626" mask="url(#path-1-inside-1_1873_540)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8.00069C4.0331 3.26794 8.15389 -0.475065 12.8802 0.0490726C14.1026 0.184637 15.1755 0.450403 16.1634 0.994663C17.1539 1.54041 17.9904 2.32824 18.8 3.40769C19.1313 3.84951 19.0418 4.47632 18.6 4.80769C18.1581 5.13906 17.5313 5.04951 17.2 4.60769C16.5096 3.68713 15.8755 3.11953 15.1982 2.74638C14.5183 2.37175 13.7262 2.15516 12.6597 2.03689C9.13467 1.64596 6.02491 4.44572 5.99995 8.01467L4 8.00069ZM18.3147 11.0585C18.8389 11.2323 19.123 11.7981 18.9492 12.3224L16.5204 19.6485L16.5191 19.6525C16.0817 20.9535 15.3501 22.0728 14.3046 22.8588C13.2528 23.6495 11.9457 24.0554 10.4489 24.0256C9.3869 24.0044 8.32234 23.6332 7.49354 22.9011C7.43449 22.8489 7.38734 22.8054 7.35353 22.7734C7.33661 22.7574 7.32298 22.7443 7.31282 22.7344L7.30019 22.7221L7.29586 22.7178L7.29419 22.7161L7.29316 22.7151C6.90264 22.3246 6.90235 21.6911 7.29287 21.3006C7.68272 20.9107 8.31436 20.9101 8.70505 21.2985L8.70608 21.2996L8.70681 21.3003L8.70763 21.3011L8.72702 21.3196C8.74601 21.3376 8.77665 21.366 8.81757 21.4021C9.25916 21.7922 9.8561 22.0134 10.4887 22.026C11.5863 22.0478 12.4448 21.7548 13.1028 21.2601C13.7667 20.761 14.2888 20.0091 14.6227 19.0172L14.6233 19.0152L17.0508 11.693C17.2246 11.1688 17.7904 10.8847 18.3147 11.0585ZM8.00002 8.00085C8.01822 5.33935 10.5876 3.43182 13.1415 4.19811C14.4429 4.58863 15.3943 5.58269 15.7875 6.77482C15.9605 7.29931 15.6755 7.86474 15.1511 8.03774C14.6266 8.21074 14.0611 7.9258 13.8881 7.40131C13.6903 6.80166 13.2152 6.30833 12.5667 6.11374C11.2962 5.73251 10.0111 6.68083 10 8.01144V8.91779C10.1443 9.01829 10.3009 9.14433 10.4571 9.30058C11.007 9.85049 11.5 10.7251 11.5 12.0077C11.5 12.56 11.0523 13.0077 10.5 13.0077C9.94772 13.0077 9.5 12.56 9.5 12.0077C9.5 11.2902 9.24298 10.9149 9.04289 10.7148C8.93333 10.6052 8.82479 10.5335 8.74873 10.4912C8.71123 10.4704 8.68357 10.4578 8.67053 10.4522L8.66761 10.451L8 10.2284L8.00002 8.00085ZM3.70718 23.7148L22.7072 4.71479L21.293 3.30057L2.29297 22.3006L3.70718 23.7148Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8802 0.0490061C8.83055 -0.399484 5.22544 2.28056 4.25537 6.03027C7.40915 9.49288 8.20399 15.9871 4.4137 20.1558C4.41524 20.1597 4.41679 20.1636 4.41834 20.1675L2.29297 22.2929L3.70718 23.7071L22.7072 4.70711L21.293 3.29289L19.4654 5.12045C18.4352 2.45838 16.0017 0.394705 12.8802 0.0490061ZM8.00002 7.99316C8.01821 5.33167 10.5876 3.42413 13.1415 4.19043C14.4429 4.58094 15.3943 5.57501 15.7875 6.76713C15.9605 7.29162 15.6755 7.85705 15.151 8.03005C14.6266 8.20305 14.0611 7.91811 13.8881 7.39362C13.6903 6.79398 13.2152 6.30064 12.5667 6.10605C11.2962 5.72482 10.0111 6.67315 10 8.00375V8.9101C10.1442 9.01061 10.3009 9.13664 10.4571 9.29289C11.007 9.8428 11.5 10.7174 11.5 12C11.5 12.5523 11.0523 13 10.5 13C9.94771 13 9.5 12.5523 9.5 12C9.5 11.2826 9.24298 10.9072 9.04289 10.7071C8.93332 10.5975 8.82478 10.5258 8.74873 10.4835C8.71122 10.4627 8.68357 10.4501 8.67053 10.4445L8.66761 10.4433L8 10.2208V9.5V8V7.99316L8.00002 7.99316ZM10.1974 22.8827C13.5 23.5 15.6802 21.9767 16.5712 19.3261L19 11L8 22C8 22 9 22.5 10.1974 22.8827Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.46165C0.0308633 3.0482 3.87356 -0.443161 8.28247 0.0457814C9.41685 0.171583 10.4181 0.418797 11.3418 0.927715C12.2682 1.43812 13.0481 2.17382 13.8 3.17634C14.1313 3.61817 14.0418 4.24497 13.6 4.57634C13.1581 4.90771 12.5313 4.81817 12.2 4.37634C11.5673 3.53271 10.9897 3.01724 10.3766 2.67943C9.76081 2.34014 9.04049 2.14211 8.06202 2.0336C4.85434 1.67787 2.02268 4.22598 1.99995 7.47563L0 7.46165ZM21 16.0077H24V14.0077H16V16.0077H19V24.0077H21V16.0077ZM8.53738 3.87844C6.13068 3.15629 3.70955 4.95392 3.69241 7.46181L3.69238 9.57402L4.35833 9.796C4.36841 9.80034 4.39138 9.81077 4.42309 9.82838C4.48832 9.86462 4.58244 9.92677 4.67758 10.0219C4.84883 10.1932 5.077 10.5204 5.077 11.161C5.077 11.7132 5.52471 12.161 6.077 12.161C6.62928 12.161 7.077 11.7132 7.077 11.161C7.077 9.95533 6.61286 9.12876 6.0918 8.60769C5.95585 8.47175 5.81961 8.35997 5.69238 8.2689V7.47244C5.70238 6.29542 6.83919 5.45698 7.96259 5.79406C8.53611 5.96615 8.9564 6.40228 9.13146 6.93301C9.30446 7.4575 9.86988 7.74244 10.3944 7.56944C10.9189 7.39644 11.2038 6.83101 11.0308 6.30652C10.6603 5.18331 9.76385 4.24645 8.53738 3.87844ZM17.7072 4.71479L1.70718 20.7148L0.292969 19.3006L16.293 3.30058L17.7072 4.71479ZM13.949 11.4756C14.1228 10.9514 13.8387 10.3856 13.3144 10.2118C12.7902 10.038 12.2244 10.322 12.0506 10.8463L9.80994 17.6049L9.80931 17.6068C9.50931 18.4982 9.04413 19.1718 8.45793 19.6213C7.87764 20.0663 7.12101 20.3366 6.15043 20.3327C5.52635 20.3301 4.93827 20.1115 4.51726 19.7234C4.49989 19.7074 4.48748 19.6955 4.48045 19.6888L4.47565 19.6842L4.47477 19.6833L4.47402 19.6825C4.08333 19.2941 3.45171 19.2948 3.06188 19.6846C2.67136 20.0751 2.67146 20.7084 3.06199 21.0989L3.06379 21.1007L3.0663 21.1032L3.07309 21.1099L3.09364 21.1299C3.11039 21.146 3.13322 21.1676 3.1617 21.1939C3.98695 21.9546 5.07137 22.3283 6.14227 22.3327C7.51204 22.3383 8.71011 21.9483 9.67495 21.2084C10.6335 20.4734 11.3036 19.4383 11.7057 18.2422L13.949 11.4756Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.37825 0.0434101C5.79106 -0.353864 2.59764 2.02012 1.73832 5.34162C4.53202 8.40883 5.23613 14.1616 1.87857 17.8543L1.88267 17.8646L0 19.7473L1.25272 21L18.0831 4.1696L16.8304 2.91688L15.2115 4.53575C14.299 2.17766 12.1433 0.349634 9.37825 0.0434101ZM4.94122 7.07965C4.95785 4.64617 7.30714 2.90179 9.64257 3.60255C10.8327 3.95966 11.7026 4.8688 12.0621 5.95863C12.2351 6.48312 11.9501 7.04854 11.4256 7.22155C10.9011 7.39455 10.3357 7.10961 10.1627 6.58512C9.99866 6.08777 9.60496 5.67936 9.06777 5.51817C8.01565 5.20248 6.95067 5.98768 6.94119 7.09029V7.83376C7.06004 7.92006 7.18649 8.02483 7.31266 8.151C7.81975 8.65809 8.26991 9.46136 8.26991 10.6297C8.26991 11.182 7.82219 11.6297 7.26991 11.6297C6.71762 11.6297 6.26991 11.182 6.26991 10.6297C6.26991 10.0265 6.05571 9.72248 5.89844 9.56521C5.81029 9.47705 5.72316 9.41957 5.66316 9.38624C5.63564 9.37095 5.61553 9.3617 5.60619 9.35762L4.94119 9.13596V8.4152V7.08648V7.07965L4.94122 7.07965ZM7.00179 20.2697C9.9273 20.8165 11.8585 19.4672 12.6478 17.1193L14.7993 9.74391L5.05535 19.4878C5.05535 19.4878 5.94116 19.9307 7.00179 20.2697ZM19 16H16V14H24V16H21V24H19V16Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.64058C0.0316034 3.12129 3.96644 -0.453788 8.48108 0.0468793C9.64266 0.175697 10.6679 0.428839 11.6137 0.949961C12.5623 1.47261 13.361 2.22595 14.1309 3.25251C14.4702 3.70493 14.3785 4.34676 13.9261 4.68608C13.4737 5.0254 12.8318 4.93371 12.4925 4.48128C11.8446 3.61742 11.2533 3.08959 10.6255 2.74368C9.99487 2.39626 9.25727 2.19347 8.25535 2.08236C4.97074 1.7181 2.07118 4.32732 2.04791 7.6549L0 7.64058ZM3.78095 7.64074C3.7985 5.07271 6.27769 3.23198 8.74211 3.97145C9.99798 4.34828 10.9159 5.3076 11.2953 6.45775C11.4725 6.99482 11.1807 7.5738 10.6436 7.75095C10.1066 7.9281 9.52757 7.63633 9.35042 7.09926C9.17117 6.5558 8.7408 6.10922 8.15353 5.933C7.00319 5.58784 5.83912 6.44638 5.82888 7.65162V8.46718C5.95916 8.56044 6.09867 8.6749 6.23788 8.8141C6.77144 9.34766 7.2467 10.1941 7.2467 11.4286C7.2467 11.9941 6.78825 12.4526 6.22272 12.4526C5.65719 12.4526 5.19874 11.9941 5.19874 11.4286C5.19874 10.7727 4.9651 10.4376 4.78975 10.2622C4.69233 10.1648 4.59595 10.1012 4.52915 10.0641C4.49668 10.046 4.47316 10.0353 4.46284 10.0309L3.78092 9.8036L3.78095 7.64074ZM1.74812 21.2115L18.1318 4.82785L16.6837 3.37973L0.299994 19.7634L1.74812 21.2115ZM13.9117 17.4155L14.6358 16.6915C17.2978 14.0295 21.6137 14.0295 24.2757 16.6915L24.9998 17.4155L23.5517 18.8636L22.8276 18.1396C20.9654 16.2774 17.9461 16.2774 16.0839 18.1396L15.3598 18.8636L13.9117 17.4155ZM16.6837 19.7634L15.9597 20.4875L17.4078 21.9356L18.1319 21.2115C18.863 20.4804 20.0485 20.4804 20.7797 21.2115L21.5037 21.9356L22.9518 20.4875L22.2278 19.7634C20.6968 18.2325 18.2147 18.2325 16.6837 19.7634ZM20.4796 23.5594C20.4796 24.1249 20.0211 24.5834 19.4556 24.5834C18.8901 24.5834 18.4316 24.1249 18.4316 23.5594C18.4316 22.9939 18.8901 22.5354 19.4556 22.5354C20.0211 22.5354 20.4796 22.9939 20.4796 23.5594ZM14.2834 11.7508C14.4614 11.214 14.1705 10.6346 13.6337 10.4566C13.0969 10.2787 12.5175 10.5696 12.3395 11.1064L10.0452 18.0271L10.0445 18.029C9.73734 18.9418 9.261 19.6315 8.66074 20.0918C8.06654 20.5475 7.29177 20.8243 6.29791 20.8203C5.65887 20.8177 5.05669 20.5937 4.62558 20.1963C4.6078 20.1799 4.59509 20.1678 4.58789 20.1609L4.58298 20.1562L4.58207 20.1553L4.5813 20.1545C4.18124 19.7568 3.53449 19.7575 3.13531 20.1566C2.73542 20.5565 2.73552 21.205 3.13541 21.6049L3.13726 21.6067L3.13983 21.6093L3.14678 21.6161L3.16782 21.6366C3.18497 21.6531 3.20835 21.6752 3.23751 21.7021C4.08255 22.4811 5.19298 22.8637 6.28956 22.8682C7.69218 22.8739 8.91897 22.4746 9.90695 21.717C10.8885 20.9643 11.5747 19.9044 11.9864 18.6796L14.2834 11.7508Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.37825 0.0434101C5.79106 -0.353864 2.59764 2.02012 1.73832 5.34162C4.53202 8.40883 5.23613 14.1616 1.87857 17.8543L1.88267 17.8646L0 19.7473L1.25272 21L18.0831 4.1696L16.8304 2.91688L15.2115 4.53575C14.299 2.17766 12.1433 0.349634 9.37825 0.0434101ZM4.94122 7.07965C4.95785 4.64617 7.30714 2.90179 9.64257 3.60255C10.8327 3.95966 11.7026 4.8688 12.0621 5.95863C12.2351 6.48312 11.9501 7.04854 11.4256 7.22155C10.9011 7.39455 10.3357 7.10961 10.1627 6.58512C9.99866 6.08777 9.60496 5.67936 9.06777 5.51817C8.01565 5.20248 6.95067 5.98768 6.94119 7.09029V7.83376C7.06004 7.92006 7.18649 8.02483 7.31266 8.151C7.81975 8.65809 8.26991 9.46136 8.26991 10.6297C8.26991 11.182 7.82219 11.6297 7.26991 11.6297C6.71762 11.6297 6.26991 11.182 6.26991 10.6297C6.26991 10.0265 6.05571 9.72248 5.89844 9.56521C5.81029 9.47705 5.72316 9.41957 5.66316 9.38624C5.63564 9.37095 5.61553 9.3617 5.60619 9.35762L4.94119 9.13596V8.4152V7.08648V7.07965L4.94122 7.07965ZM7.00179 20.2697C9.9273 20.8165 11.8585 19.4672 12.6478 17.1193L14.7993 9.74391L5.05535 19.4878C5.05535 19.4878 5.94116 19.9307 7.00179 20.2697ZM20 23C20 23.5523 19.5523 24 19 24C18.4477 24 18 23.5523 18 23C18 22.4477 18.4477 22 19 22C19.5523 22 20 22.4477 20 23ZM13.5859 17L14.293 16.2929C16.8927 13.6932 21.1076 13.6932 23.7073 16.2929L24.4144 17L23.0002 18.4142L22.293 17.7071C20.4744 15.8885 17.5259 15.8885 15.7073 17.7071L15.0002 18.4142L13.5859 17ZM15.5859 20L16.293 19.2929C17.7881 17.7978 20.2122 17.7978 21.7073 19.2929L22.4144 20L21.0002 21.4142L20.293 20.7071C19.579 19.9931 18.4213 19.9931 17.7073 20.7071L17.0002 21.4142L15.5859 20Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,7 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 5H2L2 19H22V5ZM2 3C0.895431 3 0 3.89543 0 5V19C0 20.1046 0.89543 21 2 21H22C23.1046 21 24 20.1046 24 19V5C24 3.89543 23.1046 3 22 3H2Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4.5V11H1.5V9H6V4.5H8Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.5V11H23V9H12V4.5H10Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 19.5V13H1.5V15H6V19.5H8Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 19.5V13H22.5V15H12V19.5H10Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 689 B |
@@ -0,0 +1,7 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 5C0 3.89543 0.895431 3 2 3H22C23.1046 3 24 3.89543 24 5V19C24 20.1046 23.1046 21 22 21H2C0.89543 21 0 20.1046 0 19V5Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3V10.5H0V8.5H6V3H8Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3V10.5H24V8.5H12V3H10Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 21V12.5H0V14.5H6V21H8Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 21V12.5H24V14.5H12V21H10Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 617 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47715 6.47715 2 12 2C12.9471 2 13.8619 2.13139 14.7278 2.37632L15.2722 0.451813C14.2308 0.157283 13.1329 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 10.9656 23.8689 9.96044 23.6219 9.00074L21.685 9.49926C21.8905 10.2975 22 11.1352 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM9 7.5C9 7.1312 8.79702 6.79234 8.47186 6.61833C8.1467 6.44431 7.75216 6.46338 7.4453 6.66795L5.9453 7.66795C5.48577 7.9743 5.3616 8.59517 5.66795 9.0547C5.96231 9.49623 6.54703 9.62816 7 9.36607V17C7 17.5523 7.44772 18 8 18C8.55229 18 9 17.5523 9 17V7.5ZM14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8ZM16.9495 12C17.5978 11.3647 18 10.4793 18 9.5C18 7.567 16.433 6 14.5 6C12.567 6 11 7.567 11 9.5C11 10.4793 11.4022 11.3647 12.0505 12C11.4022 12.6353 11 13.5207 11 14.5C11 16.433 12.567 18 14.5 18C16.433 18 18 16.433 18 14.5C18 13.5207 17.5978 12.6353 16.9495 12ZM14.5 13C13.6716 13 13 13.6716 13 14.5C13 15.3284 13.6716 16 14.5 16C15.3284 16 16 15.3284 16 14.5C16 13.6716 15.3284 13 14.5 13ZM19 5H17V3H19V1L21 1V3H23V5H21V7H19V5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C14.1857 0 16.235 0.584366 18 1.60539V2H16V6H18V8H22V6H22.3946C23.4156 7.76504 24 9.81428 24 12ZM14.5001 8C13.6717 8 13.0001 8.67157 13.0001 9.5C13.0001 10.3284 13.6717 11 14.5001 11C15.3285 11 16.0001 10.3284 16.0001 9.5C16.0001 8.67157 15.3285 8 14.5001 8ZM16.9496 12C17.5979 11.3647 18.0001 10.4793 18.0001 9.5C18.0001 7.567 16.4331 6 14.5001 6C12.5671 6 11.0001 7.567 11.0001 9.5C11.0001 10.4793 11.4023 11.3647 12.0506 12C11.4023 12.6353 11.0001 13.5207 11.0001 14.5C11.0001 16.433 12.5671 18 14.5001 18C16.4331 18 18.0001 16.433 18.0001 14.5C18.0001 13.5207 17.5979 12.6353 16.9496 12ZM14.5001 13C13.6717 13 13.0001 13.6716 13.0001 14.5C13.0001 15.3284 13.6717 16 14.5001 16C15.3285 16 16.0001 15.3284 16.0001 14.5C16.0001 13.6716 15.3285 13 14.5001 13ZM8.47196 6.61833C8.79712 6.79235 9.00011 7.13121 9.00011 7.5V17C9.00011 17.5523 8.55239 18 8.00011 18C7.44782 18 7.00011 17.5523 7.00011 17V9.36607C6.54713 9.62816 5.96241 9.49623 5.66806 9.0547C5.3617 8.59517 5.48588 7.9743 5.94541 7.66795L7.44541 6.66795C7.75226 6.46338 8.14681 6.44431 8.47196 6.61833ZM19 5V7H21V5H23V3H21V1L19 1V3H17V5H19Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 4H18C14.6863 4 12 6.68629 12 10V14H22V4ZM18 2C13.5817 2 10 5.58172 10 10V15C10 15.5523 10.4477 16 11 16H23C23.5523 16 24 15.5523 24 15V4C24 2.89543 23.1046 2 22 2H18ZM2 15C0.895431 15 0 14.1046 0 13V10H2L2 13H9V15H2ZM1 22H5V20H1V22ZM7 22V20H11V22H7ZM13 22H17V20H13V22ZM23 20V22H19V20H23ZM19 9.5C19 10.3284 18.3284 11 17.5 11C16.6716 11 16 10.3284 16 9.5C16 8.67157 16.6716 8 17.5 8C18.3284 8 19 8.67157 19 9.5ZM21 9.5C21 11.433 19.433 13 17.5 13C15.567 13 14 11.433 14 9.5C14 7.567 15.567 6 17.5 6C19.433 6 21 7.567 21 9.5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 698 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10C10 5.58172 13.5817 2 18 2H23C23.5523 2 24 2.44772 24 3V15C24 15.5523 23.5523 16 23 16H11C10.4477 16 10 15.5523 10 15V10ZM21 9.5C21 11.433 19.433 13 17.5 13C15.567 13 14 11.433 14 9.5C14 7.567 15.567 6 17.5 6C19.433 6 21 7.567 21 9.5ZM0 13C0 14.1046 0.895431 15 2 15H9V13H2L2 10H0V13ZM1 22H5V20H1V22ZM7 22V20H11V22H7ZM13 22H17V20H13V22ZM23 20V22H19V20H23Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 532 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.70718 23L22.7072 3.45479L21.293 2L17.3221 6.08485C15.6134 5.22128 13.8161 4.78479 11.9402 4.78479C7.61617 4.78479 3.79733 7.09346 0.487718 11.4194L0.000976562 12.0556L0.487718 12.6918C2.18803 14.9142 4.02322 16.6078 6.00293 17.7288L2.29297 21.5452L3.70718 23ZM7.4863 16.2028C5.79092 15.3559 4.1466 13.9879 2.5629 12.0555C5.47787 8.49788 8.6025 6.84218 11.9402 6.84218C12.0058 6.84218 12.0713 6.84281 12.1367 6.84409C10.9031 6.87858 9.67945 7.38011 8.7379 8.34867C6.90127 10.238 6.79217 13.2315 8.41062 15.252L7.4863 16.2028ZM9.83605 13.7857C8.99224 12.5797 9.0976 10.8882 10.1521 9.80346C11.2066 8.71868 12.8509 8.6103 14.0233 9.47832L9.83605 13.7857ZM15.4487 8.01199L15.8117 7.63856C14.9126 7.25466 13.9925 7.01057 13.0492 6.90409C13.9089 7.04224 14.7403 7.41153 15.4487 8.01199ZM21.7071 9.62696L13.7071 17.8565C13.3166 18.2583 12.6834 18.2583 12.2929 17.8565C11.9024 17.4548 11.9024 16.8035 12.2929 16.4017L20.2929 8.17217C20.6834 7.77044 21.3166 7.77044 21.7071 8.17217C22.0976 8.5739 22.0976 9.22523 21.7071 9.62696ZM23.7071 12.713C24.0976 12.3113 24.0976 11.66 23.7071 11.2583C23.3166 10.8565 22.6834 10.8565 22.2929 11.2583L18.2929 15.373C17.9024 15.7748 17.9024 16.4261 18.2929 16.8278C18.6834 17.2296 19.3166 17.2296 19.7071 16.8278L23.7071 12.713Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7072 3.45479L3.70718 23L2.29297 21.5452L6.12816 17.6C3.9683 16.3964 1.92575 14.5364 0.000488281 12.0199C3.69075 7.1965 7.81196 4.78479 12.3641 4.78479C14.1451 4.78479 15.8602 5.15395 17.5093 5.89229L21.293 2L22.7072 3.45479ZM9.47208 8.56642C7.85224 10.2327 7.68157 12.8253 8.96007 14.6868L10.3616 13.245C10.0795 12.7792 9.94076 12.2476 9.94543 11.7172C9.95176 10.9981 10.2216 10.281 10.7549 9.73241C11.2883 9.18377 11.9853 8.9062 12.6843 8.89968C13.2 8.89488 13.7167 9.0376 14.1695 9.32785L15.4217 8.03971C13.6122 6.72453 11.0919 6.90009 9.47208 8.56642ZM21.7071 9.62696C22.0976 9.22523 22.0976 8.5739 21.7071 8.17217C21.3166 7.77044 20.6834 7.77044 20.2929 8.17217L12.2929 16.4017C11.9024 16.8035 11.9024 17.4548 12.2929 17.8565C12.6834 18.2583 13.3166 18.2583 13.7071 17.8565L21.7071 9.62696ZM23.7071 11.2583C24.0976 11.66 24.0976 12.3113 23.7071 12.713L19.7071 16.8278C19.3166 17.2296 18.6834 17.2296 18.2929 16.8278C17.9024 16.4261 17.9024 15.7748 18.2929 15.373L22.2929 11.2583C22.6834 10.8565 23.3166 10.8565 23.7071 11.2583Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8081 0.399328L5.08803 15.9236C4.81982 16.4147 5.19684 17 5.78139 17H23.2186C23.8109 17 24.1873 16.4005 23.9036 15.9088L15.1865 0.384542C14.8869 -0.13481 14.0952 -0.126317 13.8081 0.399328ZM14.5013 3.24911L7.90072 15H21.0996L14.5013 3.24911ZM13.5 6H15.5V10H13.5V6ZM14.5 14C15.3284 14 16 13.3284 16 12.5C16 11.6716 15.3284 11 14.5 11C13.6716 11 13 11.6716 13 12.5C13 13.3284 13.6716 14 14.5 14ZM23 22C23 23.1046 22.1419 24 21.0833 24H1.91667C0.858121 24 0 23.1046 0 22H23ZM3 6H8.97997L7.87908 8H3V17.0879V19H20V18H22V19C22 20.1046 21.1046 21 20 21H3C1.89543 21 1 20.1046 1 19V8C1 6.89543 1.89543 6 3 6Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 775 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8081 0.399327L5.08803 15.9236C4.81982 16.4147 5.19684 17 5.78139 17H23.2186C23.8109 17 24.1873 16.4005 23.9036 15.9088L15.1865 0.384541C14.8869 -0.134811 14.0952 -0.126318 13.8081 0.399327ZM13.5 6H15.5V10H13.5V6ZM14.5 15C15.3284 15 16 14.3284 16 13.5C16 12.6716 15.3284 12 14.5 12C13.6716 12 13 12.6716 13 13.5C13 14.3284 13.6716 15 14.5 15ZM23 22C23 23.1046 22.1419 24 21.0833 24H1.91667C0.858121 24 0 23.1046 0 22H23ZM3 6H8.97997L3.10657 16.6703C2.78189 17.277 3.23828 18 3.94589 18H20H22V19C22 20.1046 21.1046 21 20 21H3C1.89543 21 1 20.1046 1 19V8C1 6.89543 1.89543 6 3 6Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 751 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50256 5.46703L7.17181 6.69387C7.06015 7.10802 7 7.54543 7 8C7 10.7614 9.23858 13 12 13C14.7614 13 17 10.7614 17 8C17 7.54543 16.9398 7.10801 16.8282 6.69387L16.4974 5.46702L17.4675 4.64636C17.7964 4.3681 18 3.95882 18 3.5C18 2.67157 17.3284 2 16.5 2C16.0412 2 15.6319 2.20357 15.3536 2.53248L14.533 3.50256L13.3061 3.1718C12.892 3.06015 12.4546 3 12 3C11.5454 3 11.108 3.06015 10.6939 3.17181L9.46703 3.50256L8.64636 2.53248C8.3681 2.20357 7.95882 2 7.5 2C6.67157 2 6 2.67157 6 3.5C6 3.95882 6.20357 4.3681 6.53248 4.64636L7.50256 5.46703ZM19 8C19 9.09191 18.75 10.1254 18.3041 11.0464L19.3117 10.7765C20.9121 10.3476 22.5571 11.2974 22.9859 12.8978C23.4148 14.4982 22.465 16.1432 20.8646 16.572L19.2673 17H19.5C21.433 17 23 18.567 23 20.5C23 22.433 21.433 24 19.5 24H4.5C2.567 24 1 22.433 1 20.5C1 18.567 2.567 17 4.5 17H4.89138L3.29411 16.572C1.69371 16.1432 0.743963 14.4982 1.17279 12.8978C1.60161 11.2974 3.24662 10.3476 4.84702 10.7765L5.67251 10.9976C5.24127 10.089 5 9.07267 5 8C5 7.36803 5.08375 6.75562 5.24075 6.17326C4.48185 5.53124 4 4.57189 4 3.5C4 1.567 5.567 0 7.5 0C8.57189 0 9.53124 0.481847 10.1733 1.24075C10.7556 1.08375 11.368 1 12 1C12.632 1 13.2444 1.08375 13.8267 1.24075C14.4688 0.481845 15.4281 0 16.5 0C18.433 0 20 1.567 20 3.5C20 4.57189 19.5182 5.53124 18.7593 6.17326C18.9163 6.75562 19 7.36803 19 8ZM12 15C10.5061 15 9.26396 16.0939 9.03723 17.5241L8.96058 18.0077C9.51318 18.5435 9.99991 19.3532 9.99991 20.5C9.99991 21.065 9.89085 21.5702 9.73917 22H14.2608C14.1092 21.5702 14.0001 21.065 14.0001 20.5C14.0001 19.3532 14.4868 18.5435 15.0394 18.0077L14.9628 17.5241C14.736 16.0939 13.4939 15 12 15ZM19.5 22H16.4819C16.4454 21.9453 16.4069 21.8839 16.3683 21.8164C16.1761 21.4799 16.0001 21.0262 16.0001 20.5C16.0001 19.9689 16.2159 19.6312 16.4829 19.3953L17.4403 19.1469C17.8086 19.0514 18.1968 19 18.6 19H19.5C20.3284 19 21 19.6716 21 20.5C21 21.3284 20.3284 22 19.5 22ZM7.51806 22C7.55463 21.9453 7.59309 21.8839 7.63167 21.8164C7.82391 21.4799 7.99991 21.0262 7.99991 20.5C7.99991 19.9689 7.7841 19.6312 7.51715 19.3953L6.55975 19.1469C6.19139 19.0514 5.80317 19 5.4 19H4.5C3.67157 19 3 19.6716 3 20.5C3 21.3284 3.67157 22 4.5 22H7.51806ZM3.81175 14.6402L6.70952 15.4166C7.24299 15.5596 7.79133 15.243 7.93427 14.7095C8.07721 14.176 7.76063 13.6277 7.22716 13.4848L4.32939 12.7083C3.79592 12.5654 3.24758 12.8819 3.10464 13.4154C2.9617 13.9489 3.27828 14.4972 3.81175 14.6402ZM17.4492 15.4166L20.347 14.6402C20.8804 14.4972 21.197 13.9489 21.0541 13.4154C20.9111 12.8819 20.3628 12.5654 19.8293 12.7083L16.9316 13.4848C16.3981 13.6277 16.0815 14.176 16.2244 14.7095C16.3674 15.243 16.9157 15.5596 17.4492 15.4166ZM12 10C12.5523 10 13 9.55229 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55229 11.4477 10 12 10Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.36562 5.9328C5.01344 5.6417 4 4.4392 4 3C4 1.34315 5.34315 0 7 0C8.4392 0 9.6417 1.01344 9.9328 2.36562C10.5773 2.1291 11.2735 2 12 2C12.7265 2 13.4228 2.1291 14.0672 2.36562C14.3583 1.01344 15.5608 0 17 0C18.6569 0 20 1.34315 20 3C20 4.4392 18.9866 5.6417 17.6344 5.9328C17.8709 6.57725 18 7.27355 18 8C18 9.55877 17.4056 10.9787 16.4311 12.0455L18.7614 11.4211C19.8283 11.1352 20.925 11.7684 21.2109 12.8353C21.4967 13.9022 20.8636 14.9989 19.7966 15.2848L16.6389 16.1309C16.8718 16.7083 17 17.3392 17 18V19.2774C17.4083 19.099 17.8593 19 18.3333 19H20.5C21.8807 19 23 20.1193 23 21.5C23 22.8807 21.8807 24 20.5 24H16.6667C16.0642 24 15.5364 23.6803 15.2436 23.2014C14.5478 23.7039 13.6931 24 12.7692 24H11.2308C10.3069 24 9.4522 23.7039 8.7564 23.2014C8.46361 23.6803 7.9358 24 7.33333 24H3.5C2.11929 24 1 22.8807 1 21.5C1 20.1193 2.11929 19 3.5 19H5.66667C6.14074 19 6.59169 19.099 7 19.2774V18C7 17.3976 7.10651 16.8202 7.30173 16.2854L3.5675 15.2848C2.50057 14.9989 1.8674 13.9022 2.15329 12.8353C2.43917 11.7684 3.53585 11.1352 4.60278 11.4211L7.79011 12.2751C6.68509 11.1869 6 9.67345 6 8C6 7.27355 6.1291 6.57725 6.36562 5.9328ZM12 10C12.5523 10 13 9.55229 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55229 11.4477 10 12 10ZM14 18C14 19.6569 13.1046 21 12 21C10.8954 21 10 19.6569 10 18C10 16.3431 10.8954 15 12 15C13.1046 15 14 16.3431 14 18Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.66722 11.0565C1.79313 10.9685 1.92241 10.8852 2.05482 10.8071C2.92586 10.2933 3.93208 10 5.00389 10C6.23862 10 7.3863 10.3892 8.34055 11.0565H8.66722C9.62147 10.3892 10.7691 10 12.0039 10C13.2386 10 14.3863 10.3892 15.3406 11.0565H15.6672C16.6215 10.3892 17.7691 10 19.0039 10C20.0792 10 21.0885 10.2952 21.9616 10.8122C22.091 10.8889 22.2174 10.9704 22.3406 11.0565H24.0155C23.9337 10.3713 23.7993 9.70311 23.6168 9.05651C22.1385 3.82114 17.5005 0 12.0078 0C6.51503 0 1.87701 3.82114 0.398775 9.05651C0.216203 9.70311 0.0818302 10.3713 0 11.0565H1.66722ZM5.00389 8C6.25994 8 7.44834 8.29999 8.50389 8.83072C9.55943 8.29999 10.7478 8 12.0039 8C13.2599 8 14.4483 8.29999 15.5039 8.83072C16.5594 8.29999 17.7478 8 19.0039 8C19.7835 8 20.5371 8.11558 21.2491 8.33019C19.6677 4.56965 16.0861 2 12.0078 2C7.93036 2 4.34951 4.56843 2.76761 8.32751C3.47692 8.11462 4.22748 8 5.00389 8ZM11 12V21C11 22.6569 12.3431 24 14 24C15.6569 24 17 22.6569 17 21V20.5556H15V21C15 21.5523 14.5523 22 14 22C13.4477 22 13 21.5523 13 21V12H11Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 11.0565H1.66722C2.62147 10.3892 3.76915 10 5.00389 10C6.23862 10 7.3863 10.3892 8.34055 11.0565H8.66722C9.62147 10.3892 10.7691 10 12.0039 10C13.2386 10 14.3863 10.3892 15.3406 11.0565H15.6672C16.6215 10.3892 17.7691 10 19.0039 10C20.2386 10 21.3863 10.3892 22.3406 11.0565H24.0155C23.2712 4.8233 18.1789 0 12.0078 0C5.83664 0 0.744384 4.8233 0 11.0565ZM11 12V21C11 22.6569 12.3431 24 14 24C15.6569 24 17 22.6569 17 21V20.5556H15V21C15 21.5523 14.5523 22 14 22C13.4477 22 13 21.5523 13 21V12H11Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 669 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.456868 7.82899C-0.00681407 7.52876 -0.139481 6.90925 0.160549 6.44526C5.71753 -2.14842 18.2827 -2.14842 23.8397 6.44526C24.1397 6.90925 24.0071 7.52876 23.5434 7.82899C23.0797 8.12921 22.4606 7.99646 22.1605 7.53248C17.3917 0.157588 6.60855 0.157588 1.83969 7.53248C1.53966 7.99646 0.92055 8.12922 0.456868 7.82899ZM5.44541 10.8234C4.98588 10.5169 4.8617 9.8956 5.16806 9.43577C8.41819 4.55738 15.582 4.55738 18.8322 9.43577C19.1385 9.8956 19.0143 10.5169 18.5548 10.8234C18.0953 11.13 17.4744 11.0057 17.1681 10.5459C14.7096 6.85575 9.29065 6.85575 6.83216 10.5459C6.5258 11.0057 5.90493 11.13 5.44541 10.8234ZM13 13.9935C13 14.5456 12.553 14.9934 12.0014 14.9941L12 14.9941L11.9986 14.9941C11.447 14.9934 11 14.5456 11 13.9935C11 13.4408 11.4477 12.9928 12 12.9928C12.5523 12.9928 13 13.4408 13 13.9935ZM15 13.9935C15 15.3005 14.1652 16.4125 13 16.8246V21.9987H16C16.5523 21.9987 17 22.4467 17 22.9993C17 23.552 16.5523 24 16 24H13H11H8C7.44772 24 7 23.552 7 22.9993C7 22.4467 7.44771 21.9987 8 21.9987H11V16.8246C9.83481 16.4125 9 15.3005 9 13.9935C9 12.3355 10.3431 10.9915 12 10.9915C13.6569 10.9915 15 12.3355 15 13.9935Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.04931 9.73645C0.0776508 9.21039 -0.284258 7.99501 0.240962 7.02182C5.29372 -2.3406 18.7061 -2.34061 23.7588 7.02181C24.2841 7.99501 23.9221 9.21039 22.9505 9.73645C21.9788 10.2625 20.7654 9.90002 20.2401 8.92682C16.6994 2.36596 7.30044 2.36596 3.75965 8.92682C3.23442 9.90002 2.02097 10.2625 1.04931 9.73645ZM6.02883 12.73C5.0633 12.1927 4.71543 10.9732 5.25184 10.0062C8.193 4.70368 15.8068 4.70368 18.7479 10.0062C19.2843 10.9732 18.9364 12.1927 17.9709 12.73C17.0054 13.2672 15.7878 12.9188 15.2514 11.9517C13.8342 9.39672 10.1655 9.39672 8.74832 11.9517C8.21192 12.9188 6.99436 13.2672 6.02883 12.73ZM13.9999 13.9836C13.9999 14.725 13.5977 15.3723 13 15.7187V21.9959H15.9998C16.5521 21.9959 16.9998 22.4443 16.9998 22.9975C16.9998 23.5506 16.5521 23.999 15.9998 23.999H13H11H8.00016C7.4479 23.999 7.0002 23.5506 7.0002 22.9975C7.0002 22.4443 7.4479 21.9959 8.00016 21.9959H11V15.7187C10.4023 15.3723 10.0001 14.725 10.0001 13.9836C10.0001 12.8773 10.8955 11.9805 12 11.9805C13.1045 11.9805 13.9999 12.8773 13.9999 13.9836Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3845 2.12476C10.5802 0.320465 8.06198 -0.333646 5.74305 0.158373C4.9647 0.32352 4.46033 0.909159 4.31832 1.57519C4.18154 2.21664 4.37806 2.91238 4.87694 3.41126L7.25462 5.78894L5.78894 7.25462L3.41126 4.87694C2.91238 4.37806 2.21664 4.18154 1.57519 4.31832C0.909158 4.46033 0.323519 4.9647 0.158373 5.74305C-0.333646 8.06198 0.320466 10.5802 2.12476 12.3845C4.07904 14.3388 6.86933 14.9438 9.34082 14.2042L18.03 23.6971C19.5727 25.3825 22.2096 25.4408 23.8252 23.8251C25.4408 22.2095 25.3825 19.5727 23.6972 18.03L14.2042 9.34074C14.9438 6.86927 14.3388 4.07902 12.3845 2.12476ZM8.7203 4.32326L6.52147 2.12442C8.0822 1.90267 9.72084 2.39243 10.9189 3.59045C12.4461 5.11772 12.8223 7.36304 12.0411 9.24451L11.7624 9.9157L22.2976 19.559C23.1121 20.3045 23.1402 21.5787 22.3595 22.3595C21.5787 23.1402 20.3045 23.1121 19.559 22.2976L9.91577 11.7624L9.24456 12.0411C7.36308 12.8223 5.11774 12.4462 3.59045 10.9189C2.39243 9.72084 1.90267 8.0822 2.12442 6.52147L4.32326 8.72031C5.13273 9.52978 6.44515 9.52978 7.25462 8.72031L8.7203 7.25462C9.52978 6.44515 9.52978 5.13273 8.7203 4.32326ZM20.8354 21.8718C21.4078 21.8718 21.8718 21.4078 21.8718 20.8354C21.8718 20.263 21.4078 19.799 20.8354 19.799C20.263 19.799 19.799 20.263 19.799 20.8354C19.799 21.4078 20.263 21.8718 20.8354 21.8718Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.349 2.11868C10.5612 0.330844 8.07028 -0.324465 5.77014 0.148821C4.7521 0.358295 4.49161 1.57662 5.15008 2.23509L8.56638 5.6514L5.65141 8.56638L2.23509 5.15006C1.57662 4.49159 0.358302 4.75209 0.148826 5.77012C-0.324469 8.07027 0.330836 10.5612 2.11867 12.349C4.21588 14.4462 7.27848 14.9856 9.87276 13.9709L18.0253 23.5239C19.5023 25.2546 22.1411 25.3588 23.7499 23.7499C25.3587 22.1411 25.2545 19.5023 23.5239 18.0254L13.9709 9.87274C14.9855 7.27846 14.4462 4.21588 12.349 2.11868ZM20.8513 21.8884C21.4241 21.8884 21.8885 21.4241 21.8885 20.8512C21.8885 20.2784 21.4241 19.8141 20.8513 19.8141C20.2785 19.8141 19.8141 20.2784 19.8141 20.8512C19.8141 21.4241 20.2785 21.8884 20.8513 21.8884Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 866 B |
@@ -4,5 +4,5 @@
|
||||
"outDir": "./cjs",
|
||||
"module": "commonjs"
|
||||
},
|
||||
"exclude": ["./figma", "./scripts", "**/stories"]
|
||||
"exclude": ["./figma", "./scripts", "**/*.stories.*"]
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "0.14.2",
|
||||
"version": "0.16.13",
|
||||
"private": false,
|
||||
"description": "NAV designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -35,8 +35,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@navikt/ds-icons": "^0.7.0",
|
||||
"@navikt/ds-icons": "^0.8.4",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"@radix-ui/react-toggle-group": "^0.1.4",
|
||||
"classnames": "^2.2.6",
|
||||
"react-collapse": "^5.1.0",
|
||||
"react-merge-refs": "^1.1.0",
|
||||
@@ -50,12 +51,12 @@
|
||||
"@testing-library/user-event": "^13.2.1",
|
||||
"@types/faker": "^5.5.8",
|
||||
"@types/jest": "^27.0.1",
|
||||
"@types/react-router-dom": "^5.1.9",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@types/styled-components": "^5.1.14",
|
||||
"copyfiles": "^2.4.1",
|
||||
"faker": "^5.5.3",
|
||||
"jest": "^27.2.0",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-router-dom": "^6.1.0",
|
||||
"rimraf": "3.0.2",
|
||||
"styled-components": "^5.3.1",
|
||||
"ts-jest": "^27.0.5"
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import MenuItems from "./MenuItems";
|
||||
import Collapsable, {
|
||||
AccordionMenuCollapsableType,
|
||||
} from "./AccordionMenuCollapsable";
|
||||
import Item, { AccordionMenuItemType } from "./AccordionMenuItem";
|
||||
|
||||
export interface AccordionMenuProps extends React.HTMLAttributes<HTMLElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface AccordionMenuComponent
|
||||
extends React.ForwardRefExoticComponent<
|
||||
AccordionMenuProps & React.RefAttributes<HTMLElement>
|
||||
> {
|
||||
Collapsable: AccordionMenuCollapsableType;
|
||||
Item: AccordionMenuItemType;
|
||||
}
|
||||
|
||||
const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
|
||||
({ children, className, ...rest }, ref) => {
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
ref={ref}
|
||||
className={cl("navds-accordion-menu", className)}
|
||||
{...rest}
|
||||
>
|
||||
<MenuItems>{children}</MenuItems>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
) as AccordionMenuComponent;
|
||||
|
||||
AccordionMenu.Collapsable = Collapsable;
|
||||
AccordionMenu.Item = Item;
|
||||
|
||||
export default AccordionMenu;
|
||||
@@ -1,45 +0,0 @@
|
||||
import React, { forwardRef, HTMLAttributes, useState } from "react";
|
||||
import cl from "classnames";
|
||||
import { Expand } from "@navikt/ds-icons";
|
||||
import MenuItems from "./MenuItems";
|
||||
|
||||
export interface AccordionMenuCollapsableProps
|
||||
extends HTMLAttributes<HTMLDivElement> {
|
||||
title: string;
|
||||
defaultOpen?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type AccordionMenuCollapsableType = React.ForwardRefExoticComponent<
|
||||
AccordionMenuCollapsableProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const Collapsable: AccordionMenuCollapsableType = forwardRef(
|
||||
({ children, defaultOpen = false, title, className, ...rest }, ref) => {
|
||||
const [isOpen, setIsOpen] = useState(defaultOpen);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cl("navds-accordion-menu-collapsable", className, {
|
||||
"navds-accordion-menu-collapsable--open": isOpen,
|
||||
})}
|
||||
{...rest}
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="navds-accordion-menu-collapsable__button"
|
||||
>
|
||||
{title}
|
||||
<Expand
|
||||
title={isOpen ? "Pil peker opp" : "Pil peker ned"}
|
||||
className="navds-accordion-menu-collapsable__expand-icon"
|
||||
/>
|
||||
</button>
|
||||
{isOpen && <MenuItems>{children}</MenuItems>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default Collapsable;
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const MenuItems = ({ children }: { children: React.ReactNode }) => (
|
||||
<ul className="navds-accordion-menu__list">
|
||||
{React.Children.toArray(children).map((child, i) => (
|
||||
<li key={i} className="navds-accordion-menu__list-item">
|
||||
{child}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
|
||||
export default MenuItems;
|
||||
@@ -1,3 +0,0 @@
|
||||
export { default as AccordionMenu, AccordionMenuProps } from "./AccordionMenu";
|
||||
export { AccordionMenuCollapsableProps } from "./AccordionMenuCollapsable";
|
||||
export { AccordionMenuItemProps } from "./AccordionMenuItem";
|
||||
@@ -1,66 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { AccordionMenu } from "../../index";
|
||||
|
||||
<Meta title="ds-react/accordion-menu/intro" />
|
||||
|
||||
# Hvordan ta i bruk Accordion-menu
|
||||
|
||||
```jsx
|
||||
<AccordionMenu>
|
||||
<AccordionMenu.item href="#leo">Leo</AccordionMenu.item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.item href="#nulla" active>
|
||||
Nulla
|
||||
</AccordionMenu.item>
|
||||
<AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Accumsan">
|
||||
<AccordionMenu.item href="#justo" aria-current="page">
|
||||
Justo
|
||||
</AccordionMenu.item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.item href="#nulla">Nulla</AccordionMenu.item>
|
||||
<AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<AccordionMenu>
|
||||
<AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.Item href="#nulla" active>
|
||||
Nulla
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Accumsan">
|
||||
<AccordionMenu.Item href="#justo" aria-current="page">
|
||||
Justo
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.Item href="#nulla">Nulla</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu>
|
||||
</Canvas>
|
||||
|
||||
Accordion-menu støtter opp til maks to-nivårer av `AccordionMenu.Collapsable` akkurat nå.
|
||||
|
||||
`AccordionMenu.Item` er implementert med `OverridableComponent`, noe som
|
||||
gjør at man kan ta i bruk eks react-router slik:
|
||||
|
||||
```jsx
|
||||
<AccordionMenu.item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/1"
|
||||
>
|
||||
Lenketekst
|
||||
</AccordionMenu.item>
|
||||
```
|
||||
|
||||
Her er `NavLink` fra `react-router-dom` brukt, og man får da
|
||||
samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.
|
||||
@@ -1,141 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { AccordionMenu } from "../index";
|
||||
import { NavLink, HashRouter as Router } from "react-router-dom";
|
||||
|
||||
export default {
|
||||
title: "ds-react/accordion-menu",
|
||||
component: { AccordionMenu },
|
||||
};
|
||||
|
||||
export const All = () => (
|
||||
<div
|
||||
style={{
|
||||
background: "white",
|
||||
maxWidth: 288,
|
||||
}}
|
||||
>
|
||||
<AccordionMenu>
|
||||
<AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.Item href="#nulla" active>
|
||||
Nulla
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Accumsan">
|
||||
<AccordionMenu.Item href="#justo" aria-current="page">
|
||||
Justo
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#pariatur" active aria-current="page">
|
||||
Pariatur
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.Item href="#nulla" active>
|
||||
Nulla
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Item href="#justo" active>
|
||||
Justo
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#pariatur">Pariatur</AccordionMenu.Item>
|
||||
</AccordionMenu>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ReactRouter = () => (
|
||||
<AccordionMenu>
|
||||
<AccordionMenu.Collapsable title="Nivå 1 – 3 rems høy">
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/1"
|
||||
>
|
||||
Nivå 2 innrykk 2 rems
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/2"
|
||||
>
|
||||
Subtitle 3
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Skjema og søknad">
|
||||
<AccordionMenu.Collapsable title="Satser">
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/3"
|
||||
>
|
||||
Nivå 3 – 3 rems innrykk Har du rett til dagpenger når du mottar annen
|
||||
økonomisk støtte fra NAV?
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/4"
|
||||
>
|
||||
Subtitle 2
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/5"
|
||||
>
|
||||
Subtitle 3
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Sakbehandlingstider">
|
||||
<AccordionMenu.Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/6"
|
||||
>
|
||||
Subtitle 5
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/7"
|
||||
>
|
||||
Internasjonalt
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Meld fra om endringer lang tittel på første nivå">
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/8"
|
||||
>
|
||||
Subtitle 6
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/9"
|
||||
>
|
||||
Nivå 1
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu>
|
||||
);
|
||||
|
||||
ReactRouter.decorators = [
|
||||
(Story) => (
|
||||
<Router>
|
||||
<div
|
||||
style={{
|
||||
background: "white",
|
||||
maxWidth: 288,
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
</Router>
|
||||
),
|
||||
];
|
||||
@@ -43,6 +43,7 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
|
||||
|
||||
return (
|
||||
<button
|
||||
{...rest}
|
||||
ref={ref}
|
||||
id={context.buttonId}
|
||||
className={cl(
|
||||
@@ -52,17 +53,17 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
|
||||
"navds-heading--small"
|
||||
)}
|
||||
onClick={handleClick}
|
||||
{...rest}
|
||||
aria-expanded={context.open}
|
||||
>
|
||||
{children}
|
||||
<Expand
|
||||
title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
|
||||
aria-hidden
|
||||
className={cl("navds-accordion__expand-icon", {
|
||||
"navds-accordion__expand-icon--flip": context.open,
|
||||
})}
|
||||
/>
|
||||
<ExpandFilled
|
||||
title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
|
||||
aria-hidden
|
||||
className={cl(
|
||||
"navds-accordion__expand-icon",
|
||||
"navds-accordion__expand-icon--filled",
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import React, { useState } from "react";
|
||||
import AccordionContent from "./AccordionContent";
|
||||
import AccordionHeader from "./AccordionHeader";
|
||||
import AccordionItem from "./AccordionItem";
|
||||
import { Accordion } from ".";
|
||||
|
||||
export default {
|
||||
title: "ds-react/accordion",
|
||||
component: Accordion,
|
||||
subcomponents: {
|
||||
AccordionItem,
|
||||
AccordionContent,
|
||||
AccordionHeader,
|
||||
},
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Accordion</h1>
|
||||
<h2>Controlled</h2>
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={() => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
||||
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
||||
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
||||
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
||||
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
||||
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
||||
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
||||
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
||||
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
||||
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
||||
proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
<h2>Un-controlled</h2>
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
||||
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
||||
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
||||
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
||||
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
||||
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
||||
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
||||
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
||||
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
||||
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
||||
proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
||||
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
||||
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
||||
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
||||
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
||||
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
||||
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
||||
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
||||
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
||||
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
||||
proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,72 +0,0 @@
|
||||
import { Meta, Canvas, Props } from "@storybook/addon-docs";
|
||||
import { Accordion } from "../../index";
|
||||
|
||||
<Meta title="ds-react/accordion/intro" />
|
||||
|
||||
# Hvordan ta i bruk Accordion
|
||||
|
||||
```jsx
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi
|
||||
qui nostrud sit.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Aliquip amet irure consectetur occaecat</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
|
||||
consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do deserunt
|
||||
amet exercitation velit Lorem.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>
|
||||
Aliquip amet irure consectetur occaecat
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
|
||||
consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do
|
||||
deserunt amet exercitation velit Lorem.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</Canvas>
|
||||
|
||||
## Controlled state
|
||||
|
||||
Accordion-komponeten styrer selv open-state, men om man ønsker kan man selv overskrive denne med
|
||||
`open`-prop + `onClick`-prop slik det er gjort på eksemplet.
|
||||
|
||||
```jsx
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={(open) => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
`renderContentWhenClosed`-prop på `Accordion.Item` bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
|
||||
Accordion er lukket. Defaulter til `false`.
|
||||