-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: add
img, span and div as elements with examples and visual…
… test
- Loading branch information
1 parent
aa2dc01
commit bf36cdd
Showing
23 changed files
with
523 additions
and
62 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
111 changes: 111 additions & 0 deletions
111
packages/dnb-design-system-portal/src/docs/uilib/elements/image.md
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,111 @@ | ||
| --- | ||
| title: 'Image' | ||
| --- | ||
|
|
||
| import ComponentBox from 'Tags/ComponentBox' | ||
|
|
||
| ## Image | ||
|
|
||
| The image element associated with the class `dnb-img` does not have much opinionated styling. It exists more to have a future possibility to optimize and add features. | ||
|
|
||
| As of now, the React image "element" (Img) does provide a `figure` element with the `role="img"` and an `img` tag inside. This is mainly to support the [Skeleton](/uilib/components/skeleton) provider. | ||
|
|
||
| Styles wise, the background color is defined long with a centered alternative text. | ||
|
|
||
| ```jsx | ||
| import { Img } from 'dnb-ui-lib/elements' | ||
|
|
||
| render(<Img alt="..." src="..." width="100" height="100" />) | ||
| ``` | ||
|
|
||
| ### Basic image element | ||
|
|
||
| <ComponentBox data-visual-test="image-plain" useRender hideCode> | ||
| {` | ||
| const StyledImg = styled(Img)\` | ||
| border-radius: 1rem; | ||
| \` | ||
| const CustomImage = () => { | ||
| return ( | ||
| <StyledImg | ||
| width="100" | ||
| height="100" | ||
| alt="DNB logo" | ||
| src="https://raw.githubusercontent.com/dnbexperience/eufemia/release/logo.png" | ||
| /> | ||
| ) | ||
| } | ||
| render(<CustomImage />) | ||
| `} | ||
| </ComponentBox> | ||
|
|
||
| ### Image with invalid source | ||
|
|
||
| <ComponentBox data-visual-test="image-no-source" useRender hideCode> | ||
| {` | ||
| const StyledImg = styled(Img)\` | ||
| border-radius: 1rem; | ||
| \` | ||
| const CustomImage = () => { | ||
| return ( | ||
| <StyledImg | ||
| width="100" | ||
| height="100" | ||
| alt="Alt text" | ||
| src="https://invalid" | ||
| /> | ||
| ) | ||
| } | ||
| render(<CustomImage />) | ||
| `} | ||
| </ComponentBox> | ||
|
|
||
| ### Image with caption | ||
|
|
||
| <ComponentBox data-visual-test="image-caption" useRender hideCode> | ||
| {` | ||
| const StyledImg = styled(Img)\` | ||
| border-radius: 1rem; | ||
| \` | ||
| const CustomImage = () => { | ||
| return ( | ||
| <StyledImg | ||
| width="100" | ||
| height="100" | ||
| alt="Alt text" | ||
| caption="Caption text" | ||
| src="https://raw.githubusercontent.com/dnbexperience/eufemia/release/logo.png" | ||
| /> | ||
| ) | ||
| } | ||
| render(<CustomImage />) | ||
| `} | ||
| </ComponentBox> | ||
|
|
||
| ### Image element with skeleton | ||
|
|
||
| <ComponentBox data-visual-test="image-skeleton" useRender> | ||
| {` | ||
| const StyledImg = styled(Img)\` | ||
| border-radius: 1rem; | ||
| \` | ||
| const CustomImage = () => { | ||
| const [state, setState] = React.useState(true) | ||
| return ( | ||
| <Skeleton show={state}> | ||
| <StyledImg | ||
| width="100" | ||
| height="100" | ||
| alt="DNB logo" | ||
| src="https://raw.githubusercontent.com/dnbexperience/eufemia/release/logo.png" | ||
| /> | ||
| <br /> | ||
| <Skeleton.Exclude> | ||
| <ToggleButton checked={state} on_change={({ checked }) => setState(checked)} top="large">Toggle</ToggleButton> | ||
| </Skeleton.Exclude> | ||
| </Skeleton> | ||
| ) | ||
| } | ||
| render(<CustomImage />) | ||
| `} | ||
| </ComponentBox> |
7 changes: 7 additions & 0 deletions
7
packages/dnb-design-system-portal/src/docs/uilib/elements/not-supported.md
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,7 @@ | ||
| import CodeBlock from 'Tags/CodeBlock' | ||
|
|
||
| ## Missing HTML Elements | ||
|
|
||
| Not every commonly used HTML Elements are included yet in the `dnb-ui-lib`. This decision is made by the DNB UX Team and relies on a principle to make UX design as good as possible, consistent and more thoughtful towards a broader customer target. | ||
|
|
||
| - For the `select` element, use the [**Dropdown**](/uilib/components/dropdown) component. |
7 changes: 0 additions & 7 deletions
7
packages/dnb-design-system-portal/src/docs/uilib/elements/other.md
This file was deleted.
Oops, something went wrong.
56 changes: 56 additions & 0 deletions
56
packages/dnb-design-system-portal/src/docs/uilib/elements/unstyled.md
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,56 @@ | ||
| import ComponentBox from 'Tags/ComponentBox' | ||
|
|
||
| ## Unstyled HTML Elements | ||
|
|
||
| In order to use the inherited [Skeleton](/uilib/components/skeleton), there are a number of un-styled HTML elements, that do inherit and react to the Skeleton Provider. | ||
|
|
||
| ```jsx | ||
| import { Span, Div } from 'dnb-ui-lib/elements' | ||
| ``` | ||
|
|
||
| - `Span` | ||
| - `Div` | ||
|
|
||
| ### Example usage of span | ||
|
|
||
| <ComponentBox data-visual-test="span-skeleton" useRender> | ||
| {` | ||
| const Box = styled.div\` | ||
| display: grid; | ||
| place-items: center; | ||
| width: 12rem; | ||
| height: 4rem; | ||
| padding: 0 1rem; | ||
| background-color: white; | ||
| \` | ||
| const StyledButton = styled.button\` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| &:hover { | ||
| color: var(--color-fire-red); | ||
| } | ||
| &:active { | ||
| opacity: 0.6; | ||
| } | ||
| \` | ||
| const CustomImage = () => { | ||
| const [state, setState] = React.useState(false) | ||
| return ( | ||
| <Skeleton show={state}> | ||
| <Box> | ||
| <StyledButton className="dnb-button dnb-button--reset"> | ||
| <Span>Text</Span> | ||
| <IconPrimary icon="chevron_right" /> | ||
| </StyledButton> | ||
| </Box> | ||
| <br /> | ||
| <Skeleton.Exclude> | ||
| <ToggleButton checked={state} on_change={({ checked }) => setState(checked)} top="large">Toggle</ToggleButton> | ||
| </Skeleton.Exclude> | ||
| </Skeleton> | ||
| ) | ||
| } | ||
| render(<CustomImage />) | ||
| `} | ||
| </ComponentBox> |
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,19 @@ | ||
| /** | ||
| * HTML Element | ||
| * | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import E from './Element' | ||
|
|
||
| const Div = (p) => <E is="div" skeleton_method="shape" {...p} /> | ||
| Div.tagName = 'dnb-div' | ||
| Div.propTypes = { | ||
| children: PropTypes.node | ||
| } | ||
| Div.defaultProps = { | ||
| children: null | ||
| } | ||
|
|
||
| export default Div |
Oops, something went wrong.