-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #82 from danskernesdigitalebibliotek/release/2
Release 2 - PR
- Loading branch information
Showing
50 changed files
with
851 additions
and
87 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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,5 @@ | ||
| # Ignore markdown since linter uses other rules than Prettier | ||
| *.md | ||
|
|
||
| # Ignore Yaml since linter uses other rules than Prettier | ||
| *.yml |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
79 changes: 79 additions & 0 deletions
79
src/stories/autosuggest-material/AutosuggestMaterial.stories.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,79 @@ | ||
| import { ComponentMeta, ComponentStory } from "@storybook/react"; | ||
| import { withDesign } from "storybook-addon-designs"; | ||
| import { AutosuggestMaterial, AutosuggestMaterialProps } from "./AutosuggestMaterial"; | ||
|
|
||
| export default { | ||
| title: "Components / Autosuggest - Material", | ||
| component: AutosuggestMaterial, | ||
| decorators: [withDesign], | ||
| argTypes: { | ||
| items: { | ||
| name: "Items", | ||
| defaultValue: [ | ||
| { | ||
| cover: "images/book_cover_1.jpg", | ||
| title: "De uadskillelige", | ||
| author: "Simone De Beauvoir", | ||
| year: "1954", | ||
| },{ | ||
| cover: "images/book_cover_2.jpg", | ||
| title: "Den lille bog om dansk design", | ||
| author: "Marie Hugsted", | ||
| year: "2018", | ||
| },{ | ||
| cover: "images/book_cover_3.jpg", | ||
| title: "Audrey Hepburn", | ||
| author: "Maria Isabel Sanchez Vegara", | ||
| year: "2018", | ||
| } | ||
| ], | ||
| control: { type: "array" } | ||
| } | ||
| }, | ||
| parameters: { | ||
| design: { | ||
| type: "figma", | ||
| url: | ||
| "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4709%3A24976", | ||
| }, | ||
| }, | ||
| } as ComponentMeta<typeof AutosuggestMaterial>; | ||
|
|
||
| const Template: ComponentStory<typeof AutosuggestMaterial> = (args: AutosuggestMaterialProps) => ( | ||
| // Apart from AutosuggestMaterial, everything else is here just for the story | ||
| // context. AutosuggestMaterial style is directly dependent on the header, | ||
| // search field, and AutosuggestText styling. | ||
| // If you find out this context no longer represents reality, please adjust it. | ||
| <> | ||
| <header className="header" style={{height: "144px"}}> | ||
| <div className="header__logo-desktop"> | ||
| <p className="text-body-medium-regular">Context</p> | ||
| </div> | ||
| <div className="header__menu"> | ||
| <nav className="header__menu-first"> | ||
| <p className="text-body-medium-regular">Context</p> | ||
| </nav> | ||
| <div className="header__menu-second"> | ||
| <div className="header__menu-search"> | ||
| <input | ||
| className="header__menu-search-input text-body-medium-regular" | ||
| type="text" | ||
| placeholder="This field is here just for context." | ||
| /> | ||
| <img | ||
| className="header__menu-search-icon" | ||
| src={`icons/basic/icon-search.svg`} | ||
| alt="search icon" | ||
| /> | ||
| <AutosuggestMaterial {...args} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="header__clock"> | ||
| <p className="text-body-medium-regular">Context</p> | ||
| </div> | ||
| </header> | ||
| </> | ||
| ); | ||
|
|
||
| export const MaterialSuggestion = Template.bind({}); |
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,46 @@ | ||
| import { Material } from "../material/Material"; | ||
|
|
||
| export type AutosuggestMaterialProps = { | ||
| items: { | ||
| cover: string; | ||
| title: string; | ||
| author: string; | ||
| year: string; | ||
| }[] | ||
| } | ||
|
|
||
| export const AutosuggestMaterial = (props: AutosuggestMaterialProps) => { | ||
| const {items} = props | ||
|
|
||
| return ( | ||
| <ul className="autosuggest pb-16"> | ||
| <li> | ||
| <ul> | ||
| <li className="autosuggest__text text-body-medium-regular px-24"> | ||
| I am a contextual text item | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li className="autosuggest__divider" /> | ||
| <li> | ||
| <ul className="autosuggest__materials"> | ||
| {items.map((item) => { | ||
| return ( | ||
| <li className="autosuggest__material"> | ||
| <div className="autosuggest__material__content"> | ||
| <div className="autosuggest__cover"> | ||
| <Material size="xsmall" animate={true} url={item.cover} /> | ||
| </div> | ||
| <div className="autosuggest__info"> | ||
| <div className="text-body-medium-medium autosuggest__title">{item.title}</div> | ||
| <div className="text-body-small-regular autosuggest__author">{`${item.author} (${item.year})`}</div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| ) | ||
| } |
Oops, something went wrong.