-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
extract icons in their own file + convert data to TS + add controlled…
… mode concept
- Loading branch information
1 parent
6d7b681
commit 3699d9c
Showing
11 changed files
with
229 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| title: Controlled Mode | ||
| description: Controlled vs Uncontrolled mode in Hopper components | ||
| order: 4 | ||
| status: WIP | ||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| /* eslint-disable max-len */ | ||
| import type { SVGProps } from "react"; | ||
|
|
||
| const SvgComponent = (props: Partial<SVGProps<SVGSVGElement>>) => ( | ||
| <svg width={100} height={71} fill="none" {...props}> | ||
| <path | ||
| fill="#fff" | ||
| d="M61.976 49.687c3.057 4.99 7.033 8.659 14.066 8.659 5.908 0 9.683-2.953 9.683-7.033 0-4.89-3.878-6.621-10.381-9.465l-3.565-1.53c-10.29-4.383-17.124-9.875-17.124-21.484C54.654 8.141 62.802 0 75.537 0c9.065 0 15.583 3.155 20.28 11.416l-11.104 7.13c-2.445-4.384-5.082-6.11-9.176-6.11-4.177 0-6.824 2.648-6.824 6.11 0 4.277 2.65 6.009 8.767 8.658l3.565 1.527C93.16 33.926 100 39.222 100 51.13 100 63.967 89.915 71 76.372 71 63.13 71 54.575 64.69 50.39 56.419l11.587-6.732Zm-50.37 1.236c2.24 3.974 4.278 7.334 9.177 7.334 4.685 0 7.64-1.833 7.64-8.96V.814h14.259V49.49c0 14.764-8.657 21.483-21.292 21.483C9.974 70.974 3.362 65.067 0 57.95l11.607-7.027Z" | ||
| /> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default SvgComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| /* eslint-disable max-len */ | ||
| import type { SVGProps } from "react"; | ||
|
|
||
| const SvgComponent = (props: Partial<SVGProps<SVGSVGElement>>) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width={100} | ||
| height={89} | ||
| fill="none" | ||
| {...props} | ||
| > | ||
| <g fill="#fff" clipPath="url(#a)"> | ||
| <path d="M50 53.416c4.922 0 8.913-3.992 8.913-8.916s-3.99-8.916-8.913-8.916c-4.922 0-8.913 3.992-8.913 8.916s3.99 8.916 8.913 8.916Z" /> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M7.389 39.004c-2.151 1.943-3.041 3.804-3.041 5.496 0 1.692.89 3.553 3.041 5.496 2.151 1.942 5.386 3.792 9.568 5.389 8.35 3.189 20.032 5.207 33.043 5.207s24.693-2.018 33.043-5.207c4.182-1.597 7.417-3.447 9.568-5.389 2.151-1.943 3.041-3.804 3.041-5.496 0-1.692-.89-3.553-3.041-5.496-2.151-1.942-5.386-3.792-9.568-5.389-8.35-3.189-20.032-5.207-33.043-5.207s-24.693 2.018-33.043 5.207c-4.182 1.597-7.417 3.447-9.568 5.389Zm8.017-9.452c8.96-3.422 21.192-5.493 34.594-5.493 13.402 0 25.634 2.07 34.594 5.493 4.472 1.708 8.241 3.795 10.93 6.224C98.214 38.204 100 41.148 100 44.5c0 3.352-1.787 6.296-4.476 8.724-2.689 2.429-6.458 4.516-10.93 6.224-8.96 3.422-21.192 5.493-34.594 5.493-13.402 0-25.634-2.07-34.594-5.493-4.472-1.708-8.241-3.795-10.93-6.224C1.786 50.796 0 47.852 0 44.5c0-3.352 1.787-6.296 4.476-8.724 2.689-2.429 6.458-4.516 10.93-6.224Z" | ||
| clipRule="evenodd" | ||
| /> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M33.453 4.838c-2.758-.892-4.814-.733-6.28.113-1.464.847-2.63 2.548-3.237 5.383-.606 2.835-.59 6.562.119 10.983 1.414 8.828 5.508 19.957 12.013 31.229 6.506 11.272 14.094 20.383 21.03 26.021 3.474 2.825 6.692 4.703 9.45 5.595 2.757.892 4.813.733 6.278-.114 1.465-.846 2.632-2.547 3.238-5.382.606-2.835.59-6.562-.119-10.983-1.414-8.828-5.508-19.957-12.013-31.229-6.506-11.272-14.094-20.383-21.03-26.021-3.474-2.825-6.692-4.703-9.45-5.595Zm12.191 2.22c7.443 6.05 15.352 15.61 22.053 27.221 6.701 11.61 11.024 23.242 12.541 32.715.757 4.73.835 9.038.077 12.582-.757 3.543-2.413 6.563-5.315 8.24-2.902 1.675-6.344 1.6-9.791.484-3.447-1.115-7.138-3.337-10.854-6.358-7.442-6.05-15.35-15.61-22.052-27.221-6.701-11.61-11.024-23.242-12.541-32.715-.757-4.73-.835-9.038-.077-12.582.757-3.543 2.413-6.563 5.315-8.24C27.902-.49 31.344-.415 34.791.7s7.138 3.337 10.854 6.357Z" | ||
| clipRule="evenodd" | ||
| /> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M76.064 10.334c-.606-2.835-1.773-4.536-3.238-5.383-1.465-.846-3.521-1.005-6.279-.113-2.757.892-5.975 2.77-9.45 5.595-6.935 5.638-14.523 14.75-21.029 26.021-6.505 11.272-10.6 22.4-12.013 31.229-.708 4.421-.725 8.148-.119 10.983.607 2.835 1.773 4.536 3.238 5.383 1.465.846 3.521 1.005 6.279.113 2.757-.892 5.975-2.77 9.45-5.595 6.935-5.638 14.523-14.75 21.029-26.021 6.505-11.272 10.6-22.4 12.013-31.229.708-4.421.725-8.148.119-10.983Zm4.174 11.672c-1.517 9.473-5.84 21.104-12.541 32.715-6.701 11.61-14.61 21.17-22.053 27.221-3.715 3.02-7.406 5.243-10.853 6.358-3.447 1.115-6.89 1.191-9.791-.485-2.902-1.676-4.558-4.696-5.315-8.24-.758-3.543-.68-7.852.077-12.58 1.517-9.474 5.84-21.105 12.541-32.716 6.701-11.61 14.61-21.17 22.053-27.222C58.07 4.038 61.761 1.816 65.209.7c3.447-1.115 6.89-1.191 9.791.485 2.902 1.676 4.558 4.696 5.315 8.24.758 3.543.68 7.852-.077 12.58Z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="a"> | ||
| <path fill="#fff" d="M0 0h100v89H0z" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default SvgComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import type { SVGProps } from "react"; | ||
|
|
||
| /* eslint-disable max-len */ | ||
| const SvgComponent = (props: Partial<SVGProps<SVGSVGElement>>) => ( | ||
| <svg | ||
| width={24} | ||
| height={24} | ||
| aria-hidden="true" | ||
| className="hop-Icon Icon_hop-Icon__2QpIE" | ||
| {...props} | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M4.5 12a7.5 7.5 0 0 1 10.227-6.989.75.75 0 1 0 .546-1.397 9 9 0 1 0 5.113 5.113.75.75 0 1 0-1.397.546A7.5 7.5 0 1 1 4.5 12m3.25 0a4.25 4.25 0 0 1 5.1-4.165.75.75 0 0 0 .3-1.47 5.75 5.75 0 1 0 4.486 4.486.75.75 0 0 0-1.471.298q.084.413.085.851a4.25 4.25 0 0 1-8.5 0m6.467-1.156 3.094-3.094H18.6a.75.75 0 0 0 .488-.18l1.4-1.2A.75.75 0 0 0 20 5.05h-1.05V4a.75.75 0 0 0-1.32-.488l-1.2 1.4a.75.75 0 0 0-.18.488v1.29l-3.094 3.093a2.5 2.5 0 1 0 1.06 1.06M13 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0" | ||
| /> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default SvgComponent; |
91 changes: 91 additions & 0 deletions
91
apps/docs/content/icons/overview/ReactRichIconsLibIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /* eslint-disable max-len */ | ||
|
|
||
| import type { SVGProps } from "react"; | ||
|
|
||
| const SvgComponent = (props: Partial<SVGProps<SVGSVGElement>>) => ( | ||
| <svg | ||
| width={32} | ||
| height={32} | ||
| aria-hidden="true" | ||
| className="hop-RichIcon RichIcon_hop-RichIcon__jGEmW RichIcon_hop-RichIcon--option7__j4ggC" | ||
| {...props} | ||
| > | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-background, #E5DED6)" | ||
| d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" | ||
| fillRule="evenodd" | ||
| d="M13.398 9.003q-.1.151-.24.294c.274.287.442.675.442 1.103v2.4h.8V12c0-.428.168-.816.441-1.103a2 2 0 0 1-.239-.294A2.54 2.54 0 0 1 14.2 9.2c0-.717.415-1.255.664-1.526q.134-.143.252-.246l1.304-1.305.04-.045a2 2 0 0 1 .137-.132l.02-.02v.003a1.54 1.54 0 0 1 2.122.149c.25.271.661.808.661 1.522 0 .501-.134 1-.402 1.403q-.1.151-.24.294c.274.287.442.675.442 1.103v2.4h.8V12c0-.428.168-.816.441-1.103a2 2 0 0 1-.239-.294A2.54 2.54 0 0 1 19.8 9.2c0-.717.415-1.255.664-1.526q.128-.136.242-.237l1.323-1.323q.015-.02.032-.036a2 2 0 0 1 .128-.125l.027-.027v.004a1.54 1.54 0 0 1 2.123.148c.25.271.661.808.661 1.522 0 .501-.134 1-.402 1.403q-.1.151-.24.294c.274.287.442.675.442 1.103v2.4h1.6a.8.8 0 0 1 .8.8v9.6a.8.8 0 0 1-.041.255.8.8 0 0 1-.238.352l-1.514 1.514a.8.8 0 0 1-.607.279H7.2a.8.8 0 0 1-.8-.8v-9.6a.8.8 0 0 1 .28-.607l1.512-1.513a.8.8 0 0 1 .608-.28V12c0-.428.168-.816.441-1.103a2 2 0 0 1-.239-.294A2.54 2.54 0 0 1 8.6 9.2c0-.717.415-1.255.664-1.526q.106-.113.203-.202l1.396-1.396q.044-.05.093-.093l.056-.057v.007a1.54 1.54 0 0 1 2.127.145c.25.271.661.808.661 1.522 0 .501-.134 1-.402 1.403m-1.246-.225c-.117-.506-.419-.89-.616-1.104a4 4 0 0 0-.307-.295c.062-.241.215-.457.369-.625.22-.24.585-.24.804 0 .2.217.398.516.398.846 0 .585-.279 1.072-.648 1.178m11.2 0C23.72 8.672 24 8.185 24 7.6c0-.33-.198-.629-.398-.846a.54.54 0 0 0-.805 0c-.153.168-.306.384-.368.625.09.077.197.176.307.295.197.215.5.598.616 1.104m-5.6 0c.369-.106.648-.593.648-1.178 0-.33-.198-.629-.397-.846a.54.54 0 0 0-.805 0c-.154.168-.307.384-.37.625.091.077.198.176.308.295.197.215.5.598.616 1.104" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-fill, #fff)" | ||
| fillRule="evenodd" | ||
| d="M11.984 9.8a.6.6 0 0 1 .6.6v3.2a.6.6 0 1 1-1.2 0v-3.2a.6.6 0 0 1 .6-.6" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" | ||
| fillRule="evenodd" | ||
| d="M11.984 8.8a1.6 1.6 0 0 1 1.6 1.6v3.2a1.6 1.6 0 0 1-3.2 0v-3.2a1.6 1.6 0 0 1 1.6-1.6m.6 1.6a.6.6 0 1 0-1.2 0v3.2a.6.6 0 1 0 1.2 0z" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-fill, #fff)" | ||
| fillRule="evenodd" | ||
| d="M17.584 9.8a.6.6 0 0 1 .6.6v3.2a.6.6 0 1 1-1.2 0v-3.2a.6.6 0 0 1 .6-.6" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" | ||
| fillRule="evenodd" | ||
| d="M17.584 8.8a1.6 1.6 0 0 1 1.6 1.6v3.2a1.6 1.6 0 0 1-3.2 0v-3.2a1.6 1.6 0 0 1 1.6-1.6m.6 1.6a.6.6 0 1 0-1.2 0v3.2a.6.6 0 1 0 1.2 0z" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-fill, #fff)" | ||
| fillRule="evenodd" | ||
| d="M23.184 9.8a.6.6 0 0 1 .6.6v3.2a.6.6 0 1 1-1.2 0v-3.2a.6.6 0 0 1 .6-.6" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" | ||
| fillRule="evenodd" | ||
| d="M23.184 8.8a1.6 1.6 0 0 1 1.6 1.6v3.2a1.6 1.6 0 0 1-3.2 0v-3.2a1.6 1.6 0 0 1 1.6-1.6m.6 1.6a.6.6 0 1 0-1.2 0v3.2a.6.6 0 1 0 1.2 0z" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-fill, #fff)" | ||
| d="M7.984 13.8a1 1 0 0 1 1-1h17.2a1 1 0 0 1 1 1V23a1 1 0 0 1-1 1h-17.2a1 1 0 0 1-1-1z" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" | ||
| fillRule="evenodd" | ||
| d="M26.184 13.8h-17.2V23h17.2zm-17.2-1a1 1 0 0 0-1 1V23a1 1 0 0 0 1 1h17.2a1 1 0 0 0 1-1v-9.2a1 1 0 0 0-1-1z" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-fill, #fff)" | ||
| d="M12.784 7.6c0 .663-.358 1.2-.8 1.2s-.8-.537-.8-1.2.8-1.2.8-1.2.8.537.8 1.2" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" | ||
| fillRule="evenodd" | ||
| d="m12.542 5.57-.558.83-.557-.83.557-.375zm-.558.83-.557-.83-.002.001-.003.002-.005.004-.015.01a3 3 0 0 0-.172.13c-.102.083-.24.204-.382.357-.25.27-.664.81-.664 1.526 0 .501.134 1 .402 1.403.264.396.739.797 1.398.797.66 0 1.134-.4 1.398-.797.268-.403.402-.902.402-1.403 0-.717-.415-1.255-.664-1.526a3.6 3.6 0 0 0-.554-.487l-.015-.01-.005-.004-.002-.002h-.002zm0 0s.8.537.8 1.2-.358 1.2-.8 1.2-.8-.537-.8-1.2.8-1.2.8-1.2" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-fill, #fff)" | ||
| d="M18.384 7.6c0 .663-.358 1.2-.8 1.2s-.8-.537-.8-1.2.8-1.2.8-1.2.8.537.8 1.2" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" | ||
| fillRule="evenodd" | ||
| d="m18.142 5.57-.558.83-.558-.83.558-.375zm-.558.83-.558-.83-.002.001-.002.002-.005.004-.015.01a3 3 0 0 0-.172.13c-.102.083-.24.204-.382.357-.25.27-.664.81-.664 1.526 0 .501.134 1 .402 1.403.264.396.739.797 1.398.797.66 0 1.134-.4 1.398-.797.268-.403.402-.902.402-1.403 0-.717-.415-1.255-.664-1.526a3.6 3.6 0 0 0-.554-.487l-.015-.01-.005-.004-.003-.002s-.002-.001-.559.829m0 0s.8.537.8 1.2-.358 1.2-.8 1.2-.8-.537-.8-1.2.8-1.2.8-1.2" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-fill, #fff)" | ||
| d="M23.984 7.6c0 .663-.358 1.2-.8 1.2s-.8-.537-.8-1.2.8-1.2.8-1.2.8.537.8 1.2" | ||
| /> | ||
| <path | ||
| fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" | ||
| fillRule="evenodd" | ||
| d="m23.742 5.57-.558.83-.558-.83.558-.375zm-.558.83-.558-.83-.002.001-.002.002-.005.004-.015.01a3 3 0 0 0-.172.13c-.102.083-.24.204-.382.357-.25.27-.664.81-.664 1.526 0 .501.134 1 .402 1.403.264.396.739.797 1.398.797.66 0 1.134-.4 1.398-.797.268-.403.402-.902.402-1.403 0-.717-.415-1.255-.664-1.526a3.6 3.6 0 0 0-.554-.487l-.015-.01-.005-.004-.002-.002h-.002zm0 0s.8.537.8 1.2-.358 1.2-.8 1.2-.8-.537-.8-1.2.8-1.2.8-1.2M10.018 17.9c-.284 0-.698-.214-1.22-.981l-.827.563c.567.832 1.242 1.418 2.047 1.418s1.481-.586 2.048-1.418c.523-.768.937-.982 1.221-.982s.699.214 1.221.982c.568.832 1.243 1.418 2.048 1.418s1.48-.586 2.048-1.418c.522-.768.937-.982 1.221-.982s.699.214 1.221.982c.567.832 1.243 1.418 2.048 1.418s1.48-.586 2.048-1.418c.32-.471.609-.744.853-.878.225-.122.415-.131.612-.057l.354-.935c-.489-.185-.983-.137-1.444.114-.44.24-.837.657-1.202 1.193-.522.767-.937.981-1.221.981s-.699-.214-1.221-.981c-.567-.833-1.243-1.419-2.048-1.419s-1.48.586-2.048 1.419c-.522.767-.937.981-1.22.981-.285 0-.7-.214-1.222-.981-.567-.833-1.243-1.419-2.048-1.419s-1.48.586-2.047 1.419c-.523.767-.937.981-1.222.981" | ||
| /> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default SvgComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import type { SVGProps } from "react"; | ||
|
|
||
| /* eslint-disable max-len */ | ||
| const SvgComponent = (props: Partial<SVGProps<SVGSVGElement>>) => ( | ||
| <svg | ||
| width={24} | ||
| height={24} | ||
| aria-hidden="true" | ||
| className="hop-Icon Icon_hop-Icon__2QpIE" | ||
| {...props} | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M13.569 17a1.5 1.5 0 0 0-1.024.404L9 20.715V18.5A1.5 1.5 0 0 0 7.5 17a3 3 0 0 1-3-3V9.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3V14a3 3 0 0 1-3 3zm2.931 1.5h-2.931L9.74 22.076c-.827.772-2.241.225-2.241-.867V18.5A4.5 4.5 0 0 1 3 14V9.5A4.5 4.5 0 0 1 7.5 5h9A4.5 4.5 0 0 1 21 9.5V14a4.5 4.5 0 0 1-4.5 4.5m-.562-5.625a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25M10.93 11.75a1.125 1.125 0 1 0 2.25 0 1.125 1.125 0 0 0-2.25 0m-2.868 1.125a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25" | ||
| /> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default SvgComponent; |
Oops, something went wrong.